/* ============================================================ Helpdesk Redesign — Friendly SaaS overlay for Orchid Platform Source design: Claude Design "Helpdesk Redesign" (handoff bundle) Applies: tokens, dark mode, accent picker, density, typography, sidebar / cards / tables / buttons / forms / badges / login. Toggled at runtime by /js/redesign.js (writes data-* on ). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* Brand (default accent: indigo/violet, matches design) */ --accent-h: 246; --brand-50: #eef4ff; --brand-100: #dbe6ff; --brand-200: #b9ceff; --brand-300: #8aabff; --brand-400: #5d83fb; --brand-500: #3a62f0; --brand-600: #2848d6; --brand-700: #2138ab; --brand-800: #1f3289; --brand-900: #1d2d6e; --bg: #f6f7fb; --surface: #ffffff; --surface-2: #fbfbfd; --surface-3: #f1f3f9; --border: #e6e8ef; --border-strong: #d6d9e3; --text: #0f1530; --text-2: #474d63; --text-3: #737a92; --text-4: #a4aabd; --green-50: #e8f8ee; --green-500: #1aa863; --green-600: #147c4a; --amber-50: #fff5e0; --amber-500: #e0a219; --amber-600: #a87311; --red-50: #fdecec; --red-500: #d83a3a; --red-600: #a32a2a; --violet-50:#efeafe; --violet-500:#7c5cf2; --violet-600:#5b3edd; --teal-50: #e2f6f4; --teal-500: #13a89e; --teal-600: #0c7d76; --row-h: 40px; --pad-x: 14px; --pad-y: 10px; --gap: 12px; --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-xl: 24px; --shadow-sm: 0 1px 2px rgba(20,28,60,.06), 0 1px 1px rgba(20,28,60,.04); --shadow: 0 4px 14px rgba(20,28,60,.06), 0 1px 2px rgba(20,28,60,.04); --shadow-lg: 0 22px 40px -16px rgba(20,28,60,.18), 0 6px 16px -8px rgba(20,28,60,.10); --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } [data-density="comfy"] { --row-h: 48px; --pad-x: 16px; --pad-y: 12px; --gap: 16px; } [data-density="dense"] { --row-h: 36px; --pad-x: 12px; --pad-y: 8px; --gap: 10px; } [data-theme="dark"] { --bg: #0d1020; --surface: #151933; --surface-2: #1a1f3d; --surface-3: #232850; --border: #262c52; --border-strong: #343b6a; --text: #f1f3ff; --text-2: #c5cae6; --text-3: #8b91b8; --text-4: #5b6088; --green-50: #0e2a1f; --amber-50: #2c2210; --red-50: #2c1717; --violet-50:#1d1740; --teal-50: #0e2a28; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 4px 14px rgba(0,0,0,.35); --shadow-lg: 0 22px 40px -16px rgba(0,0,0,.55); color-scheme: dark; } /* ---- Accent presets ---- */ [data-accent="indigo"] { --brand-400:#5d83fb; --brand-500:#3a62f0; --brand-600:#2848d6; --brand-700:#2138ab; } [data-accent="violet"] { --brand-400:#9b6ff7; --brand-500:#7c5cf2; --brand-600:#5b3edd; --brand-700:#4429b3; } [data-accent="teal"] { --brand-400:#3ec3b9; --brand-500:#13a89e; --brand-600:#0c7d76; --brand-700:#085d57; } [data-accent="emerald"]{ --brand-400:#3acf85; --brand-500:#1aa863; --brand-600:#147c4a; --brand-700:#0c5b35; } [data-accent="rose"] { --brand-400:#ee6b8e; --brand-500:#e0476f; --brand-600:#b9304f; --brand-700:#8e213b; } [data-accent="amber"] { --brand-400:#f1b94a; --brand-500:#e0a219; --brand-600:#a87311; --brand-700:#7a520b; } /* ---- Body / typography ---- */ html, body, body > .container-fluid, body > .container-fluid > .row, .workspace, .workspace-limit { background: var(--bg) !important; } body { font-family: var(--font-sans) !important; font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .text-black, h1, h2, h3, h4, h5, h6 { color: var(--text) !important; } .text-muted, small.text-muted { color: var(--text-3) !important; } code, kbd, pre, samp, .font-monospace { font-family: var(--font-mono) !important; } /* ---- Bootstrap brand-color overrides (applies to btn-primary, links, focus rings) ---- */ :root { --bs-primary: var(--brand-500); --bs-primary-rgb: 58, 98, 240; --bs-link-color: var(--brand-600); --bs-link-hover-color: var(--brand-700); --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-border-radius: var(--radius); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); } [data-theme="dark"] { --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-border-color: var(--border); } a { color: var(--brand-600); } a:hover { color: var(--brand-700); } /* ---- App shell: sidebar (Orchid .aside) ---- */ .aside { background: var(--surface) !important; border-right: 1px solid var(--border); padding: 14px 10px !important; } .aside .header-brand { padding: 6px 10px 14px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .aside .nav-link, .aside .nav .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px !important; margin: 1px 4px; border-radius: 10px !important; color: var(--text-2) !important; font-weight: 500; font-size: 13.5px; transition: background-color .12s ease, color .12s ease; } .aside .nav-link:hover { background: var(--surface-3) !important; color: var(--text) !important; } .aside .nav-link.active, .aside .nav-link[aria-current="page"] { background: color-mix(in srgb, var(--brand-500) 12%, transparent) !important; color: var(--brand-700) !important; } [data-theme="dark"] .aside .nav-link.active { background: color-mix(in srgb, var(--brand-500) 22%, transparent) !important; color: var(--brand-200) !important; } .aside .nav-link svg, .aside .nav-link .icon { width: 17px; height: 17px; opacity: .85; } /* Sidebar search input */ .aside .search input, .aside input[type="search"] { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 12.5px; } .aside .search input:focus, .aside input[type="search"]:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-400) 25%, transparent); } /* ---- Topbar / breadcrumb ---- */ .breadcrumb { background: transparent; font-size: 13px; color: var(--text-3); padding: 12px 24px 6px; margin-bottom: 0; } .breadcrumb-item.active { color: var(--text); font-weight: 600; } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-4); } .command-bar-wrapper { padding: 8px 0 14px; } .command-bar-wrapper h1 { font-weight: 700 !important; font-size: 24px !important; letter-spacing: -.01em; color: var(--text) !important; } .command-bar-wrapper small { color: var(--text-3); font-size: 13px; } .nav-tabs-alt { margin: 12px 0 0; border-bottom: 1px solid var(--border); } .nav-tabs-alt .nav-tabs { gap: 8px; border-bottom: 0; flex-wrap: nowrap; overflow-x: auto; } .nav-tabs-alt .nav-item { margin-bottom: -1px; } .nav-tabs-alt .nav-link { min-width: 132px; padding: 10px 14px; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--text-2) !important; font-size: 13px; font-weight: 600; text-align: center; white-space: nowrap; opacity: 1; } .nav-tabs-alt .nav-link:hover { color: var(--text) !important; border-bottom-color: var(--border-strong) !important; } .nav-tabs-alt .nav-link.active { color: var(--brand-700) !important; border-bottom-color: var(--brand-500) !important; } [data-theme="dark"] .nav-tabs-alt .nav-link.active { color: var(--brand-200) !important; } /* ---- Cards ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-header, .card-footer { background: transparent; border-color: var(--border); padding: 14px 18px; } .card-header { font-weight: 700; font-size: 14.5px; color: var(--text); } .card-body { padding: 18px; } .bg-white, .bg-light { background: var(--surface) !important; color: var(--text) !important; } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background: var(--surface) !important; } /* ---- Dashboard charts ---- */ .dashboard-chart-shell[data-chart-type="pie"] .dashboard-chart-card { min-height: 500px; } .dashboard-chart-shell[data-chart-type="pie"] figure { align-content: flex-start; align-items: flex-start; justify-content: center; } .dashboard-chart-shell[data-chart-type="pie"] figure > svg { flex: 0 0 auto; margin: 6px auto 0; max-width: 100%; overflow: visible; } .dashboard-chart-shell[data-chart-type="pie"] .chart-legend .legend-dataset-text { fill: var(--text-2); font-size: 12px; font-weight: 600; } /* ---- Buttons ---- */ .btn { border-radius: var(--radius); font-weight: 600; font-size: 13px; padding: 8px 14px; border: 1px solid var(--border); transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s; } .btn-primary, .btn-default[data-action*="save"] { background: var(--brand-500) !important; border-color: var(--brand-500) !important; color: #fff !important; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand-500) 60%, transparent); } .btn-primary:hover, .btn-default[data-action*="save"]:hover { background: var(--brand-600) !important; border-color: var(--brand-600) !important; color: #fff !important; } .btn-default, .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-default:hover, .btn-secondary:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); } .btn-link, .btn-light { color: var(--text-2); } .btn-light { background: var(--surface-2); border-color: var(--border); } .btn-light:hover { background: var(--surface-3); color: var(--text); } .btn-danger { background: var(--red-500); border-color: var(--red-500); color: #fff; } .btn-danger:hover { background: var(--red-600); border-color: var(--red-600); } .btn-sm { padding: 6px 10px; font-size: 12.5px; border-radius: var(--radius-sm); } /* ---- Forms ---- */ .form-control, .form-select, .input-group-text { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13.5px; } .form-control:focus, .form-select:focus { background: var(--surface); color: var(--text); border-color: var(--brand-400); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-400) 18%, transparent); } .form-label { color: var(--text-2); font-weight: 600; font-size: 12.5px; } .form-text { color: var(--text-3); } .input-group-text { background: var(--surface-2); color: var(--text-3); } /* ---- Tables ---- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--surface-2); --bs-table-striped-bg: var(--surface-2); color: var(--text); font-size: 13px; border-color: var(--border); } .table thead th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; padding: 10px var(--pad-x); background: var(--surface-2); border-bottom: 1px solid var(--border); } .table tbody td { padding: var(--pad-y) var(--pad-x); border-bottom: 1px solid var(--border); vertical-align: middle; height: var(--row-h); } .table tbody tr:hover { background: var(--surface-2); } .table > :not(caption) > * > * { background: transparent; } /* ---- Badges / status pills ---- */ .badge { border-radius: 999px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; letter-spacing: 0; } .badge.bg-primary { background: color-mix(in srgb, var(--brand-500) 14%, transparent) !important; color: var(--brand-700) !important; } .badge.bg-success { background: var(--green-50) !important; color: var(--green-600) !important; } .badge.bg-warning { background: var(--amber-50) !important; color: var(--amber-600) !important; } .badge.bg-danger { background: var(--red-50) !important; color: var(--red-600) !important; } .badge.bg-info { background: var(--teal-50) !important; color: var(--teal-600) !important; } .badge.bg-secondary { background: var(--surface-3) !important; color: var(--text-2) !important; } [data-theme="dark"] .badge.bg-primary { color: var(--brand-200) !important; } /* ---- Alerts ---- */ .alert { border-radius: var(--radius); border: 1px solid var(--border); padding: 12px 14px; font-size: 13px; } .alert-success { background: var(--green-50); color: var(--green-600); border-color: color-mix(in srgb, var(--green-500) 25%, transparent); } .alert-warning { background: var(--amber-50); color: var(--amber-600); border-color: color-mix(in srgb, var(--amber-500) 25%, transparent); } .alert-danger { background: var(--red-50); color: var(--red-600); border-color: color-mix(in srgb, var(--red-500) 25%, transparent); } .alert-info { background: var(--teal-50); color: var(--teal-600); border-color: color-mix(in srgb, var(--teal-500) 25%, transparent); } /* ---- Pagination ---- */ .pagination { --bs-pagination-color: var(--text-2); --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--border); --bs-pagination-hover-bg: var(--surface-3); --bs-pagination-hover-color: var(--text); --bs-pagination-active-bg: var(--brand-500); --bs-pagination-active-border-color: var(--brand-500); --bs-pagination-disabled-bg: var(--surface-2); --bs-pagination-disabled-color: var(--text-4); --bs-pagination-border-radius: var(--radius-sm); } /* ---- Dropdowns / popovers ---- */ .dropdown-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); } .dropdown-item { color: var(--text-2); font-size: 13px; padding: 8px 14px; } .dropdown-item:hover { background: var(--surface-3); color: var(--text); } .dropdown-divider { border-color: var(--border); } /* ---- Modals ---- */ .modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--text); } .modal-header, .modal-footer { border-color: var(--border); } .modal-backdrop.show { opacity: .5; } /* ---- Login page ---- */ .form-signin { background: radial-gradient(800px 500px at 10% 10%, color-mix(in srgb, var(--brand-300) 35%, transparent), transparent 60%), radial-gradient(700px 600px at 90% 100%, color-mix(in srgb, var(--violet-500) 30%, transparent), transparent 60%), var(--bg); } .form-signin .bg-white, .form-signin .rounded.shadow-sm { background: var(--surface) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg) !important; border: 1px solid var(--border); } .form-signin h1, .form-signin h2, .form-signin h3 { font-weight: 700; letter-spacing: -.01em; } /* ---- Misc Orchid bits ---- */ hr, .divider { border-color: var(--border); opacity: 1; } .list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); } .text-bg-light, .bg-body-tertiary { background: var(--surface-2) !important; color: var(--text) !important; } /* Scrollbars (subtle, on supporting browsers) */ * { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: padding-box; } /* ============================================================ Tweaks panel (theme / accent / density picker) Markup is injected by /js/redesign.js ============================================================ */ .rd-tweaks-trigger { position: fixed; right: 18px; bottom: 18px; z-index: 1080; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; transition: transform .12s ease, background-color .12s, color .12s; } .rd-tweaks-trigger:hover { background: var(--surface-3); color: var(--text); transform: translateY(-1px); } .rd-tweaks-trigger svg { width: 18px; height: 18px; } .rd-tweaks-panel { position: fixed; right: 18px; bottom: 72px; z-index: 1080; width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px; color: var(--text); font-family: var(--font-sans); display: none; } .rd-tweaks-panel[data-open="true"] { display: block; } .rd-tweaks-panel h6 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 4px 0 8px; } .rd-tweaks-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .rd-tweaks-row:last-child { margin-bottom: 0; } .rd-chip { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background-color .12s, border-color .12s, color .12s; } .rd-chip:hover { background: var(--surface-3); color: var(--text); } .rd-chip[aria-pressed="true"] { background: var(--brand-500); border-color: var(--brand-500); color: #fff; } .rd-chip .rd-swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--swatch, var(--brand-500)); border: 1px solid color-mix(in srgb, #000 15%, transparent); } .rd-chip[aria-pressed="true"] .rd-swatch { border-color: rgba(255,255,255,.6); }