/* ============================================================================ Rhizome Admin — "Midnight Indigo" design system Hand-built design tokens + components. Dark-first, accessible focus states, responsive shell. No external fonts/CDN (offline + strict CSP). ========================================================================== */ :root { /* surfaces */ --bg: #0F1117; --surface: #171A23; --surface-2: #1E2230; --surface-3: #242938; --border: #2A2F3D; --border-2: #353B4D; /* text */ --text: #E6E8EE; --muted: #9AA3B2; --faint: #6B7280; /* brand accent */ --accent: #6366F1; --accent-2: #8B5CF6; --accent-grad: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); --accent-soft: rgba(99, 102, 241, 0.14); /* status */ --ok: #22C55E; --ok-soft: rgba(34,197,94,0.14); --warn: #F59E0B; --warn-soft: rgba(245,158,11,0.14); --err: #EF4444; --err-soft: rgba(239,68,68,0.14); --info: #38BDF8; --info-soft: rgba(56,189,248,0.14); /* readable text colours for tinted (soft) badges/flashes — overridden per theme */ --ok-text:#86EFAC; --warn-text:#FCD34D; --err-text:#FCA5A5; --info-text:#BAE6FD; --accent-text:#C7CBFF; /* geometry */ --r-sm: 7px; --r: 11px; --r-lg: 16px; --r-pill: 999px; --sp: 8px; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.28); --shadow-lg: 0 12px 40px rgba(0,0,0,.45); --ring: 0 0 0 3px rgba(99,102,241,.45); --sidebar-w: 248px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; --mono: "SF Mono", ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; } /* ============================================================================ Themes — selected by data-theme on . Each block overrides the colour tokens; all components read the tokens, so they re-skin automatically. Default (no attribute) = Midnight Indigo above. ========================================================================== */ /* Aurora — bright / white */ [data-theme="light"] { --bg: #F2F5FA; --surface: #FFFFFF; --surface-2: #F1F5F9; --surface-3: #E7EDF5; --border: #E2E8F0; --border-2: #CBD5E1; --text: #0F172A; --muted: #51607A; --faint: #94A3B8; --accent: #2563EB; --accent-2: #0D9488; --accent-grad: linear-gradient(135deg,#2563EB 0%,#0D9488 100%); --accent-soft: rgba(37,99,235,.12); --ok:#16A34A; --ok-soft:rgba(22,163,74,.12); --warn:#D97706; --warn-soft:rgba(217,119,6,.14); --err:#DC2626; --err-soft:rgba(220,38,38,.10); --info:#0284C7; --info-soft:rgba(2,132,199,.12); --ok-text:#15803D; --warn-text:#B45309; --err-text:#B91C1C; --info-text:#0369A1; --accent-text:#1D4ED8; --shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 16px rgba(15,23,42,.08); --shadow-lg: 0 12px 40px rgba(15,23,42,.16); --ring: 0 0 0 3px rgba(37,99,235,.35); } [data-theme="light"] .sidebar { background: linear-gradient(180deg,#FFFFFF,#F1F5F9); } [data-theme="light"] .topbar { background: rgba(255,255,255,.8); } /* Sepia — warm paper */ [data-theme="sepia"] { --bg: #ECE3CE; --surface: #F7EFD9; --surface-2: #EFE5CB; --surface-3: #E6D9BB; --border: #DBCBA1; --border-2: #C9B585; --text: #43361F; --muted: #7A6A4C; --faint: #9C8B6A; --accent: #B45309; --accent-2: #92400E; --accent-grad: linear-gradient(135deg,#B45309 0%,#D97706 100%); --accent-soft: rgba(180,83,9,.14); --ok:#4D7C0F; --ok-soft:rgba(77,124,15,.16); --warn:#B45309; --warn-soft:rgba(180,83,9,.16); --err:#B91C1C; --err-soft:rgba(185,28,28,.12); --info:#0E7490; --info-soft:rgba(14,116,144,.14); --ok-text:#3F6212; --warn-text:#92400E; --err-text:#991B1B; --info-text:#155E75; --accent-text:#9A3412; --shadow: 0 1px 2px rgba(67,54,31,.10), 0 4px 16px rgba(67,54,31,.10); --shadow-lg: 0 12px 40px rgba(67,54,31,.18); --ring: 0 0 0 3px rgba(180,83,9,.35); } [data-theme="sepia"] .sidebar { background: linear-gradient(180deg,#F3E9CF,#ECE0C2); } [data-theme="sepia"] .topbar { background: rgba(247,239,217,.82); } /* Graphite — neutral dark + amber */ [data-theme="graphite"] { --bg: #141414; --surface: #1E1E1E; --surface-2: #262626; --surface-3: #2F2F2F; --border: #333333; --border-2: #454545; --text: #F5F5F4; --muted: #A8A29E; --faint: #78716C; --accent: #F59E0B; --accent-2: #EA580C; --accent-grad: linear-gradient(135deg,#F59E0B 0%,#EA580C 100%); --accent-soft: rgba(245,158,11,.16); --ok:#65A30D; --ok-soft:rgba(101,163,13,.16); --warn:#EA580C; --warn-soft:rgba(234,88,12,.16); --err:#DC2626; --err-soft:rgba(220,38,38,.14); --info:#0EA5E9; --info-soft:rgba(14,165,233,.14); --ok-text:#A3E635; --warn-text:#FB923C; --err-text:#FCA5A5; --info-text:#7DD3FC; --accent-text:#FCD34D; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.34); --ring: 0 0 0 3px rgba(245,158,11,.45); } [data-theme="graphite"] .sidebar { background: linear-gradient(180deg,#1A1A1A,#121212); } /* High contrast — accessibility */ [data-theme="contrast"] { --bg: #000000; --surface: #0B0B0B; --surface-2: #161616; --surface-3: #222222; --border: #555555; --border-2: #777777; --text: #FFFFFF; --muted: #E5E5E5; --faint: #BBBBBB; --accent: #FFD400; --accent-2: #FF8A00; --accent-grad: linear-gradient(135deg,#FFD400 0%,#FF8A00 100%); --accent-soft: rgba(255,212,0,.20); --ok:#22FF77; --ok-soft:rgba(34,255,119,.18); --warn:#FFB000; --warn-soft:rgba(255,176,0,.20); --err:#FF4D4D; --err-soft:rgba(255,77,77,.20); --info:#33C6FF; --info-soft:rgba(51,198,255,.18); --ok-text:#22FF77; --warn-text:#FFB000; --err-text:#FF6B6B; --info-text:#7FDBFF; --accent-text:#FFE34D; --ring: 0 0 0 3px rgba(255,212,0,.6); } [data-theme="contrast"] .btn-primary { color:#000; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 14.5px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1,h2,h3 { margin: 0 0 .4em; font-weight: 650; letter-spacing: -.01em; } h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0 0 1em; color: var(--muted); } code, .mono { font-family: var(--mono); font-size: .9em; } /* ---- icons ---- */ .icon { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .icon-lg { width: 22px; height: 22px; } /* ============================ App shell ============================ */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .sidebar { background: linear-gradient(180deg, #14171F 0%, #10131A 100%); border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; } .brand .logo { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-grad); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow); } .brand .logo .icon { stroke-width: 2.4; } .brand b { font-size: 1.05rem; letter-spacing: -.02em; } .brand small { display: block; color: var(--faint); font-size: .72rem; font-weight: 500; } .nav-label { color: var(--faint); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 16px 12px 6px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--muted); font-weight: 550; cursor: pointer; transition: background .12s, color .12s; } .nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav-item.active { background: var(--accent-soft); color: var(--accent-text); } .nav-item.active .icon { color: var(--accent-2); } .sidebar .spacer { flex: 1; } .who { padding: 10px 12px; border-top: 1px solid var(--border); margin-top: 8px; } .who .email { font-weight: 600; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* topbar + content */ .main { display: flex; flex-direction: column; min-width: 0; } .topbar { height: 62px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: rgba(15,17,23,.72); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; } .topbar .page-title { font-size: 1.15rem; font-weight: 650; } .content { padding: 28px; max-width: 1180px; width: 100%; } /* ============================ Role badge ============================ */ .role-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); } .role-superadmin { background: var(--accent-soft); color: var(--accent-text); border: 1px solid rgba(139,92,246,.4); } .role-admin { background: var(--info-soft); color: var(--info-text); border: 1px solid rgba(56,189,248,.35); } /* ============================ Cards ============================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); } .card .card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card .card-head h2, .card .card-head h3 { margin: 0; } .card .card-body { padding: 20px; } .grid { display: grid; gap: 18px; } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } /* stat cards */ .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .stat::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent-grad); opacity: .85; } .stat .label { color: var(--muted); font-size: .8rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .stat .value { font-size: 2rem; font-weight: 720; letter-spacing: -.02em; margin-top: 6px; } .stat .sub { color: var(--faint); font-size: .78rem; margin-top: 2px; } /* ============================ Buttons ============================ */ .btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: .88rem; padding: 9px 15px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; transition: transform .04s, background .14s, border-color .14s, box-shadow .14s; white-space: nowrap; color: var(--text); background: var(--surface-2); border-color: var(--border-2); } .btn:hover { background: var(--surface-3); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn .icon { width: 16px; height: 16px; } .btn-primary { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: 0 2px 12px rgba(99,102,241,.35); } .btn-primary:hover { background: var(--accent-grad); filter: brightness(1.08); } .btn-ghost { background: transparent; border-color: var(--border-2); color: var(--muted); } .btn-ghost:hover { color: var(--text); background: var(--surface-2); } .btn-danger { background: var(--err-soft); border-color: rgba(239,68,68,.4); color: var(--err-text); } .btn-danger:hover { background: rgba(239,68,68,.22); } .btn-sm { padding: 6px 11px; font-size: .8rem; } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ============================ Badges / pills ============================ */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 650; padding: 3px 10px; border-radius: var(--r-pill); } .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pill-active { background: var(--ok-soft); color: var(--ok-text); } .pill-suspended { background: var(--warn-soft); color: var(--warn-text); } .pill-deleted { background: var(--err-soft); color: var(--err-text); } .pill-frozen { background: var(--info-soft); color: var(--info-text); } .pill-primary { background: var(--accent-soft); color: var(--accent-text); } .pill-alias { background: var(--surface-3); color: var(--muted); } /* ============================ Tables ============================ */ .table { width: 100%; border-collapse: collapse; font-size: .9rem; } .table th { text-align: left; color: var(--faint); font-weight: 650; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; border-bottom: 1px solid var(--border); } .table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tbody tr { transition: background .1s; } .table tbody tr:hover { background: var(--surface-2); } .table .muted { color: var(--muted); } .table .actions { text-align: right; white-space: nowrap; } .table .actions form { display: inline; } /* ============================ Forms ============================ */ .field { margin-bottom: 14px; } .field label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .input, select.input, textarea.input { width: 100%; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 9px 12px; transition: border-color .12s, box-shadow .12s; } .input::placeholder { color: var(--faint); } .input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .form-row .field { flex: 1; min-width: 180px; margin-bottom: 0; } .hint { color: var(--faint); font-size: .78rem; margin-top: 6px; } .checks { display: flex; flex-wrap: wrap; gap: 8px 18px; } .checks label { display: flex; align-items: center; gap: 7px; font-weight: 500; color: var(--text); font-size: .85rem; } .checks input { accent-color: var(--accent); width: 15px; height: 15px; } /* ============================ Progress / fill bars ============================ */ .fill { height: 9px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; } .fill > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent-grad); } .fill.warn > span { background: linear-gradient(90deg,#F59E0B,#F97316); } .fill.err > span { background: linear-gradient(90deg,#EF4444,#DC2626); } /* ============================ Flash ============================ */ .flash { display: flex; align-items: flex-start; gap: 11px; padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 20px; border: 1px solid; font-weight: 500; word-break: break-word; } .flash .icon { flex-shrink: 0; margin-top: 1px; } .flash-ok { background: var(--ok-soft); border-color: rgba(34,197,94,.4); color: var(--ok-text); } .flash-warn { background: var(--warn-soft); border-color: rgba(245,158,11,.4); color: var(--warn-text); } .flash-err { background: var(--err-soft); border-color: rgba(239,68,68,.4); color: var(--err-text); } /* ============================ Misc ============================ */ .row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .empty { text-align: center; padding: 40px 20px; color: var(--faint); } .empty .icon { width: 34px; height: 34px; opacity: .5; margin-bottom: 10px; } .kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; font-size: .9rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 550; } .danger-zone { border-color: rgba(239,68,68,.35) !important; } .danger-zone .card-head { color: var(--err-text); } .divider { height: 1px; background: var(--border); margin: 22px 0; } .tag-list { display: flex; flex-wrap: wrap; gap: 8px; } /* ============================ Auth screen ============================ */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(900px 500px at 15% -10%, rgba(99,102,241,.18), transparent 60%), radial-gradient(700px 500px at 110% 110%, rgba(139,92,246,.16), transparent 55%), var(--bg); } .auth-card { width: 100%; max-width: 396px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 32px; } .auth-card .brand { justify-content: center; padding: 0 0 22px; } .auth-card h1 { text-align: center; font-size: 1.3rem; } .auth-sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: .9rem; } .auth-card .btn-primary { width: 100%; justify-content: center; margin-top: 6px; padding: 11px; } .auth-foot { text-align: center; margin-top: 20px; font-size: .82rem; color: var(--faint); } /* ============================ Responsive ============================ */ @media (max-width: 980px) { .grid.cols-4 { grid-template-columns: repeat(2,1fr); } .grid.cols-3 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 720px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s; width: 80%; max-width: 300px; } .sidebar.open { transform: none; } .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } .content { padding: 18px; } .menu-btn { display: inline-flex !important; } .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dt { margin-top: 8px; } } .menu-btn { display: none; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 7px; color: var(--text); cursor: pointer; } /* ---- End-user portal launchpad ---- */ .portal-hero { margin-bottom: 22px; } .portal-hero h1 { margin: 0 0 4px; } .portal-hero .sub { color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .9rem; } .launch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; } .launch-tile { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; } .launch-tile:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-lg); } .launch-tile .launch-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent-grad); color: #fff; } .launch-tile .launch-ic .icon { width: 23px; height: 23px; } .launch-tile h4 { margin: 2px 0 0; font-size: 1.02rem; } .launch-tile p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.4; } .section-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 10px; font-weight: 600; }