/* ========================================================================== admin-skin.css — a reversible DESIGN SYSTEM for the admin surface -------------------------------------------------------------------------- This is NOT just a color swap. It re-skins the whole admin (13 /partners pages) into one cohesive system: consistent typography, a unified button system, tiles, cards, inputs, tables, modals, nav, badges. The HTML is untouched - everything is scoped under html[data-skin="..."], so the legacy Tailwind look is the default (no attribute) and 100% reversible. - TO ADD A SKIN (future): copy the [data-skin="v2"] palette block, rename to [data-skin="v3"], change the --s-* values. The system rules below apply to it. - TO TUNE: edit the --s-* variables (palette) or the --sys-* tokens (shape/type). - TO REVERT: ?skin=off (live) or delete this file + its tags (one commit). Toggle: /js/admin-skin.js sets from ?skin= / localStorage (default v2). Scope: all /partners admin pages. Excludes Workshop app + user Service portal. ========================================================================== */ /* ========================================================================== SKIN "v2" — MODERN NEUTRAL (palette + design tokens) ========================================================================== */ html[data-skin="v2"] { /* surfaces */ --s-page: #eef2f7; /* app background (cool slate) */ --s-surface: #ffffff; /* cards / panels */ --s-surface-2: #f8fafc; /* inset / striped rows */ --s-surface-3: #f1f5f9; /* hover / chips */ /* lines + text */ --s-border: #e2e8f0; --s-border-2: #cbd5e1; --s-text: #0f172a; --s-text-2: #334155; --s-text-muted: #64748b; --s-text-faint: #94a3b8; /* primary (near-black) + accent (muted blue) */ --s-primary: #0f172a; --s-primary-hover: #1e293b; --s-primary-soft: #f1f5f9; --s-primary-text: #ffffff; --s-accent: #2563eb; --s-accent-hover: #1d4ed8; --s-accent-soft: #eff6ff; --s-accent-text: #1e40af; /* status */ --s-ok: #047857; --s-ok-soft: #ecfdf5; --s-warn: #b45309; --s-warn-soft: #fffbeb; --s-bad: #b91c1c; --s-bad-soft: #fef2f2; /* ---- design tokens (shape + type) ---- one knob each, system-wide ---- */ --sys-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sys-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --sys-radius: 10px; /* cards / panels */ --sys-radius-sm: 8px; /* buttons / inputs / tiles */ --sys-radius-lg: 14px; /* modals / big panels */ --sys-shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05); --sys-shadow-pop: 0 12px 40px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08); --sys-ring: 0 0 0 3px rgba(37,99,235,.35); /* focus ring (accent) */ --sys-track: -.011em; /* heading tracking */ } /* ========================================================================== TYPOGRAPHY — one font + scale across every page/modal ========================================================================== */ html[data-skin="v2"] body, html[data-skin="v2"] input, html[data-skin="v2"] textarea, html[data-skin="v2"] select, html[data-skin="v2"] button { font-family: var(--sys-font) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html[data-skin="v2"] h1, html[data-skin="v2"] h2, html[data-skin="v2"] h3, html[data-skin="v2"] h4, html[data-skin="v2"] h5 { letter-spacing: var(--sys-track); color: var(--s-text); } html[data-skin="v2"] .font-mono, html[data-skin="v2"] code, html[data-skin="v2"] pre { font-family: var(--sys-mono); } /* ========================================================================== SURFACES + COLOR REMAP (Tailwind utilities → skin vars) Specificity: html[attr] .class (0,2,1) beats Tailwind .class (0,1,0) — no !important needed for plain utilities; !important only on borders (Tailwind sets them inline-ish). ========================================================================== */ html[data-skin="v2"] body { background-color: var(--s-page); color: var(--s-text-2); } html[data-skin="v2"] .bg-gray-50 { background-color: var(--s-page); } html[data-skin="v2"] .bg-gray-100 { background-color: var(--s-surface-3); } html[data-skin="v2"] .bg-gray-200 { background-color: var(--s-surface-3); } html[data-skin="v2"] .bg-white { background-color: var(--s-surface); } html[data-skin="v2"] .border-gray-100, html[data-skin="v2"] .border-gray-200 { border-color: var(--s-border) !important; } html[data-skin="v2"] .border-gray-300, html[data-skin="v2"] .border-gray-400 { border-color: var(--s-border-2) !important; } html[data-skin="v2"] .divide-gray-200 > * + * { border-color: var(--s-border); } html[data-skin="v2"] .text-gray-900 { color: var(--s-text); } html[data-skin="v2"] .text-gray-800, html[data-skin="v2"] .text-gray-700 { color: var(--s-text-2); } html[data-skin="v2"] .text-gray-600, html[data-skin="v2"] .text-gray-500 { color: var(--s-text-muted); } html[data-skin="v2"] .text-gray-400, html[data-skin="v2"] .text-gray-300 { color: var(--s-text-faint); } html[data-skin="v2"] .ring-green-500 { --tw-ring-color: var(--s-accent); } html[data-skin="v2"] .border-green-500, html[data-skin="v2"] .border-green-600 { border-color: var(--s-accent) !important; } /* ========================================================================== HEADER / NAV — clean light header: white surface, hairline border, subtle accent underline (no dark band). ========================================================================== */ html[data-skin="v2"] header.bg-white { background-color: var(--s-surface) !important; border-bottom: 1px solid var(--s-border) !important; box-shadow: 0 1px 2px rgba(15,23,42,.03); } html[data-skin="v2"] header.bg-white h1 { color: var(--s-text) !important; } html[data-skin="v2"] header.bg-white nav button, html[data-skin="v2"] header.bg-white nav a { border-radius: 8px; transition: background-color .15s ease, color .15s ease; } html[data-skin="v2"] header.bg-white nav button:hover, html[data-skin="v2"] header.bg-white nav a:hover { background-color: var(--s-surface-3) !important; } /* ========================================================================== BUTTON SYSTEM — unified: primary (solid near-black), accent (blue), secondary (outline), ghost (text). Consistent radius/padding/weight/transition. ========================================================================== */ html[data-skin="v2"] button, html[data-skin="v2"] a[href]:not([href=""]) { transition: background-color .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .05s ease; } /* PRIMARY (was green) → solid near-black */ html[data-skin="v2"] .bg-green-600, html[data-skin="v2"] .bg-green-700, html[data-skin="v2"] .bg-green-800 { background-color: var(--s-primary) !important; color: var(--s-primary-text) !important; border-radius: var(--sys-radius-sm); font-weight: 600; box-shadow: 0 1px 2px rgba(15,23,42,.18); } html[data-skin="v2"] .hover\:bg-green-700:hover, html[data-skin="v2"] .hover\:bg-green-800:hover { background-color: var(--s-primary-hover) !important; } /* green-50 / green text = SUCCESS semantics (sold, paid, positive) — keep them GREEN, not slate. (Only the solid green-600/700/800 buttons above become near-black; soft green stays success-green.) */ html[data-skin="v2"] .bg-green-50 { background-color: var(--s-ok-soft) !important; } html[data-skin="v2"] .text-green-600, html[data-skin="v2"] .text-green-700, html[data-skin="v2"] .text-green-800 { color: var(--s-ok) !important; } /* ACCENT (was blue) → muted blue, the single accent */ html[data-skin="v2"] .bg-blue-600, html[data-skin="v2"] .bg-blue-700 { background-color: var(--s-accent) !important; color: #fff !important; border-radius: var(--sys-radius-sm); font-weight: 600; } html[data-skin="v2"] .hover\:bg-blue-700:hover { background-color: var(--s-accent-hover) !important; } html[data-skin="v2"] .bg-blue-50 { background-color: var(--s-accent-soft) !important; } html[data-skin="v2"] .text-blue-600, html[data-skin="v2"] .text-blue-700 { color: var(--s-accent) !important; } html[data-skin="v2"] .border-blue-500, html[data-skin="v2"] .border-blue-600 { border-color: var(--s-accent) !important; } /* SECONDARY outline buttons (gray-100/200/white with border) → clean outline */ html[data-skin="v2"] button.bg-gray-100, html[data-skin="v2"] button.bg-gray-200, html[data-skin="v2"] button.bg-white, html[data-skin="v2"] a.bg-white { border-radius: var(--sys-radius-sm); font-weight: 500; } /* ========================================================================== CARDS + TILES — flat, hairline border, soft shadow, consistent radius + hover ========================================================================== */ html[data-skin="v2"] .shadow, html[data-skin="v2"] .shadow-sm { box-shadow: var(--sys-shadow-card) !important; } html[data-skin="v2"] .shadow-md, html[data-skin="v2"] .shadow-lg { box-shadow: var(--sys-shadow-card) !important; } html[data-skin="v2"] .rounded-lg { border-radius: var(--sys-radius) !important; } html[data-skin="v2"] .rounded-xl, html[data-skin="v2"] .rounded-2xl { border-radius: var(--sys-radius) !important; } /* kanban tiles (workshop + personal board) */ html[data-skin="v2"] .kb-tile { border-radius: var(--sys-radius-sm) !important; border-color: var(--s-border) !important; transition: transform .12s ease, box-shadow .12s ease; } html[data-skin="v2"] .kb-tile:hover { box-shadow: var(--sys-shadow-card); } /* kanban cards (personal board) */ html[data-skin="v2"] .kanban-card { border-radius: var(--sys-radius-sm) !important; border-color: var(--s-border) !important; } /* ========================================================================== INPUTS — consistent border, radius, focus ring (accent) ========================================================================== */ html[data-skin="v2"] input[type="text"], html[data-skin="v2"] input[type="email"], html[data-skin="v2"] input[type="number"], html[data-skin="v2"] input[type="password"], html[data-skin="v2"] input[type="search"], html[data-skin="v2"] input[type="date"], html[data-skin="v2"] input[type="tel"], html[data-skin="v2"] input[type="url"], html[data-skin="v2"] textarea, html[data-skin="v2"] select { border-color: var(--s-border-2) !important; border-radius: var(--sys-radius-sm) !important; background-color: var(--s-surface) !important; color: var(--s-text) !important; } html[data-skin="v2"] input:focus, html[data-skin="v2"] textarea:focus, html[data-skin="v2"] select:focus, html[data-skin="v2"] .focus\:ring-green-500:focus, html[data-skin="v2"] .focus\:border-green-500:focus { outline: none !important; border-color: var(--s-accent) !important; box-shadow: var(--sys-ring) !important; } /* ========================================================================== TABLES — consistent header + row hairlines ========================================================================== */ html[data-skin="v2"] table thead th { color: var(--s-text-muted); font-weight: 600; letter-spacing: .01em; } html[data-skin="v2"] table tbody tr { border-color: var(--s-border) !important; } html[data-skin="v2"] table tbody tr:hover { background-color: var(--s-surface-3); } /* ========================================================================== MODALS — consistent overlay + panel + radius. Targets the common fixed overlays the admin uses (x-show full-screen panels + classic modals). ========================================================================== */ html[data-skin="v2"] .fixed.inset-0[class*="bg-black"], html[data-skin="v2"] .fixed.inset-0[class*="bg-gray-900"] { background-color: rgba(15,23,42,.55) !important; backdrop-filter: blur(2px); } html[data-skin="v2"] .fixed.inset-0 .bg-white, html[data-skin="v2"] .fixed.inset-0 .rounded-lg, html[data-skin="v2"] .fixed.inset-0 .rounded-xl { border-radius: var(--sys-radius-lg) !important; box-shadow: var(--sys-shadow-pop) !important; border: 1px solid var(--s-border); } html[data-skin="v2"] .modal .box { border-radius: var(--sys-radius-lg) !important; box-shadow: var(--sys-shadow-pop) !important; } /* ========================================================================== BADGES / PILLS — flat, consistent radius ========================================================================== */ html[data-skin="v2"] .badge { border-radius: 6px !important; font-weight: 600; } html[data-skin="v2"] .rounded-full { /* keep pills round */ } /* ========================================================================== STATUS COLORS — calmed toward neutral ========================================================================== */ html[data-skin="v2"] .bg-emerald-50 { background-color: var(--s-ok-soft) !important; } html[data-skin="v2"] .text-emerald-600, html[data-skin="v2"] .text-emerald-700 { color: var(--s-ok) !important; } html[data-skin="v2"] .bg-amber-50, html[data-skin="v2"] .bg-yellow-50 { background-color: var(--s-warn-soft) !important; } html[data-skin="v2"] .text-amber-600, html[data-skin="v2"] .text-yellow-600 { color: var(--s-warn) !important; } html[data-skin="v2"] .bg-red-50 { background-color: var(--s-bad-soft) !important; } html[data-skin="v2"] .text-red-600, html[data-skin="v2"] .text-red-700 { color: var(--s-bad) !important; }