:root{ color-scheme: light; /* text — cool slate ink */ --ink:#0F172A; --ink-soft:#475569; /* surfaces (elevation: page < card < raised) */ --page:#F5F6F8; /* page background — light gray, cards float on it */ --paper-dim:#F1F3F6; /* subtle gray: hovers, wells, thumbnails */ --paper:#FFFFFF; /* card */ --surface:#FFFFFF; /* raised: inputs, tiles, list rows */ /* accent — one restrained blue (variable names kept for compatibility) */ --brass:#2D64BC; --brass-light:#5285D6; --oxblood:#B4304A; /* danger text/accent (theme-aware) */ --danger-solid:#B4304A; /* filled danger button — white text on this */ --green:#10B981; --green-text:#0F7B5F; /* green as TEXT — --green fails AA on white; use this for labels */ --violet-text:#6B61BB; /* violet as TEXT — raw #7a6fd6 fails AA on its own badge tint */ --on-brass:#FFFFFF; /* foreground for text/icons ON a --brass fill (theme-aware) */ /* custom-select.css used to detect "am I on a brass palette?" by testing whether --brass was defined at all. That broke once the dashboard's settings pages aliased --brass for an unrelated crm.css widget, so the component now takes explicit tokens and defaults to the dashboard's wash treatment. base_app.html loads this file immediately before it, so this is the palette that opts in; the values reproduce exactly what the old var(--brass, ...) / var(--on-brass, ...) chains resolved to here. */ --cs-hover-bg: var(--paper-dim); --cs-current-bg: var(--brass); --cs-current-ink: var(--on-brass); --line: rgba(15,23,42,0.10); /* crisper, lighter hairline */ /* elevation — soft & spread for an airy, premium feel */ --shadow-sm: 0 1px 2px rgba(15,23,42,0.05); --shadow-md: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06); --shadow-lg: 0 2px 4px rgba(15,23,42,0.04), 0 16px 40px rgba(15,23,42,0.09); /* radius scale — single source of truth */ --radius: 3px; /* sharp editorial: cards (brand signature) */ --radius-ctl: 8px; /* buttons, small controls */ --radius-input: var(--radius-ctl); /* text inputs/selects/textareas — match buttons, not cards */ --radius-tile: 10px; /* tiles, quick links, list rows */ --radius-lg: 12px; /* dialogs, feature cards, swatches */ /* motion */ --ease: 0.15s ease; } /* Dark theme — set by the no-FOUC script in base_app.html . The sidebar is dark in both themes; here we recolor the light paper shell. */ [data-theme="dark"]{ color-scheme: dark; --ink:#E6E9F0; --ink-soft:#94A3B8; --page:#111111; --paper-dim:#1C1C1C; --paper:#151515; --surface:#1E1E1E; --brass:#6B9FE8; --brass-light:#8FB8F0; --oxblood:#F0728A; --danger-solid:#CD3E59; /* darkened from #D4405C so white button text clears 4.5:1 */ --green:#34D399; --green-text:#34D399; /* on dark, the bright green already passes as text */ --violet-text:#8C80F6; /* dark --brass (#6B9FE8) is too light to carry white text (~2.7:1); use near-black ink on it instead (~8:1). */ --on-brass:#0E1116; /* --cs-current-bg/-ink/-hover above are declared with var() references, so they re-resolve against this block's --brass/--on-brass/--paper-dim automatically; only redeclare here if a literal is ever used. */ --line: rgba(230,233,240,0.12); --shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --shadow-md: 0 1px 2px rgba(0,0,0,0.40), 0 6px 18px rgba(0,0,0,0.45); --shadow-lg: 0 1px 2px rgba(0,0,0,0.40), 0 12px 30px rgba(0,0,0,0.55); } [data-theme="dark"] .card{ border:1px solid var(--line); } *{box-sizing:border-box;} /* Custom scrollbar — thin, subtle gray, no arrows. Mirrors the treatment in ui_concept.css/dashboard.css; this is the copy that covers base_app.html and everything that extends it. WebKit/Blink only: the standard scrollbar-width/scrollbar-color props are intentionally omitted — setting them makes Chromium ignore these ::-webkit-scrollbar rules (and re-adds the native arrow buttons). Firefox falls back to its own scrollbars, which have no arrows anyway. */ @supports selector(::-webkit-scrollbar){ *{ scrollbar-width:auto; } } *::-webkit-scrollbar{ width:8px; height:8px; } *::-webkit-scrollbar-track{ background:transparent; } *::-webkit-scrollbar-thumb{ background:rgba(128,128,140,.4); border-radius:20px; border:2px solid transparent; background-clip:padding-box; } *::-webkit-scrollbar-thumb:hover{ background:rgba(128,128,140,.65); background-clip:padding-box; } *::-webkit-scrollbar-button, *::-webkit-scrollbar-button:single-button, *::-webkit-scrollbar-button:start, *::-webkit-scrollbar-button:end, *::-webkit-scrollbar-button:horizontal, *::-webkit-scrollbar-button:vertical{ display:none; width:0; height:0; } *::-webkit-scrollbar-corner{ background:transparent; } body{ margin:0; background: var(--page); font-family:'DM Sans','IBM Plex Sans',system-ui,sans-serif; letter-spacing:-0.006em; color: var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--brass-light); outline-offset:2px; border-radius:2px; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } .topbar{ background: var(--ink); color: var(--paper); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .topbar .brand{ font-family:'Fraunces', serif; font-weight:700; font-size:18px; color: var(--paper); text-decoration:none; } .topbar nav{ display:flex; align-items:center; gap:14px; } .topbar a{ color: var(--paper); text-decoration:none; font-size:13.5px; font-weight:500; } .topbar a:hover{ color: var(--brass-light); } .topbar form{ margin:0; } .topbar button{ background:none; border:none; cursor:pointer; color: var(--paper); font-family:inherit; font-size:13.5px; font-weight:500; padding:0; } .topbar button:hover{ color: var(--brass-light); } main{ max-width:760px; margin:0 auto; padding:40px 24px 72px; } h1{ font-family:'Fraunces', serif; font-weight:600; font-size:28px; margin:0 0 6px; } h2{ font-family:'Fraunces', serif; font-weight:600; font-size:20px; margin:0; } .sub{ color: var(--ink-soft); font-size:14px; margin:0 0 26px; } .card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding:26px; margin-bottom:26px; box-shadow: var(--shadow-sm); } .card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--line); } .card-head .sub{ margin-bottom:0; } form p{ margin:0 0 14px; } label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:4px; letter-spacing:0.02em; } input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], input[type=time], input[type=datetime-local], select, textarea{ width:100%; padding:9px 11px; font-family:inherit; font-size:14px; color: var(--ink); background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-input); } textarea{ min-height:90px; resize:vertical; } input:focus, select:focus, textarea:focus{ outline:2px solid var(--brass-light); outline-offset:0; } .helptext{ display:block; font-size:11.5px; color: var(--ink-soft); margin-top:3px; } ul.errorlist{ margin:4px 0; padding-left:0; list-style:none; color: var(--oxblood); font-size:12.5px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 20px; background: var(--ink); color: var(--paper); font-family:inherit; font-size:13.5px; font-weight:600; letter-spacing:0.01em; border:none; border-radius: var(--radius-ctl); cursor:pointer; text-decoration:none; transition: background var(--ease), box-shadow var(--ease), transform var(--ease); } .btn:hover{ background: var(--ink-soft); transform:translateY(-1px); } .btn:active{ transform:translateY(0); } /* display:inline-flex above would otherwise beat the UA's [hidden]{display:none} */ .btn[hidden]{ display:none !important; } .btn.primary{ background: var(--brass); color: var(--on-brass); box-shadow: var(--shadow-sm); } .btn.primary:hover{ background: var(--brass-light); box-shadow: var(--shadow-sm); } .toast-stack{ position:fixed; top:18px; right:18px; z-index:1000; display:flex; flex-direction:column; gap:10px; max-width:320px; } .toast{ padding:12px 16px; background: var(--ink); color: var(--paper); border-left:4px solid var(--brass); border-radius: var(--radius); font-size:13.5px; box-shadow: 0 2px 6px rgba(15,23,42,0.15), 0 8px 20px rgba(15,23,42,0.18); opacity:0; transform:translateY(-8px); transition:opacity 0.25s ease, transform 0.25s ease; } .toast.show{ opacity:1; transform:translateY(0); } .toast.success{ border-left-color: var(--brass); } .toast.error{ border-left-color: var(--oxblood); } .toast.warning{ border-left-color: var(--brass-light); } /* An actionable toast (e.g. Undo on a destructive change) — see showToast's optional third argument in toast.js. */ .toast.has-action{ display:flex; align-items:center; justify-content:space-between; gap:14px; } .toast-action{ flex:none; padding:4px 10px; font-family:inherit; font-size:12.5px; font-weight:700; color: var(--paper); background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28); border-radius:99px; cursor:pointer; } .toast-action:hover{ background:rgba(255,255,255,0.26); } .formset-item{ border:1px solid var(--line); border-radius: var(--radius); padding:16px; margin-bottom:14px; background: var(--surface); } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; } .grid-2 .full{ grid-column:1 / -1; } .field-stack{ display:flex; flex-direction:column; gap:4px; } .field{ margin-bottom:12px; } .field .errorlist{ margin:3px 0 0; } /* ---------- THEME SWATCH PICKER ---------- */ .theme-picker{ display:flex; flex-wrap:wrap; gap:10px; } .theme-card{ position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px 14px 9px; background: var(--surface); border:2px solid var(--line); border-radius: var(--radius-lg); cursor:pointer; font-size:12px; font-weight:600; } .theme-card input{ position:absolute; opacity:0; pointer-events:none; } .theme-card .sw{ display:flex; align-items:center; } .theme-card .sw i{ width:30px; height:30px; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); } /* Overlap the circles slightly so each palette reads as one swatch cluster, the darkest sitting on top. */ .theme-card .sw i + i{ margin-left:-8px; } .theme-card .sw i:first-child{ position:relative; z-index:2; } .theme-card .sw i:nth-child(2){ position:relative; z-index:1; } .theme-card:hover{ border-color: var(--brass-light); } .theme-card:has(input:checked){ border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); } /* ---------- SOCIAL LINK ROWS ---------- */ .social-item{ display:grid; grid-template-columns:18px 34px 150px 1fr 28px; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius: var(--radius-tile); background: var(--surface); margin-bottom:10px; } .social-item .icon-preview{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; background: var(--paper-dim); border-radius:50%; } .social-item .icon-preview svg{ width:17px; height:17px; fill: var(--ink); } .social-item .social-x{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:none; border-radius:50%; color: var(--ink-soft, #888); cursor:pointer; padding:0; } .social-item .social-x:hover{ background:rgba(155,45,48,0.1); color: var(--oxblood, #B4304A); } .social-item .social-x svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; } @media (max-width:560px){ .social-item{ grid-template-columns:18px 34px 1fr 28px; } .social-item > *{ grid-column:auto; } } /* ---------- DISCLOSURE ---------- */ details.disclosure-box{ border:1px solid var(--line); border-radius: var(--radius-tile); background: var(--surface); padding:12px 14px; } details.disclosure-box summary{ cursor:pointer; font-size:13px; font-weight:600; } details.disclosure-box .preset{ font-size:12px; line-height:1.6; color: var(--ink-soft); background: var(--paper-dim); border-radius:7px; padding:10px 12px; margin:12px 0; } /* Google Places address search mounted above listing address inputs */ gmp-place-autocomplete{ display:block; width:100%; margin-bottom:6px; border-radius: var(--radius-input); --gmp-mat-color-surface:#fff; --gmp-mat-color-on-surface: var(--ink); } .mono{ font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--ink-soft); } a.plain{ color: var(--brass); font-weight:600; text-decoration:none; } a.plain:hover{ text-decoration:underline; } /* A