/* ========================================================================== KAKISO DASHBOARD SKIN — design-system reskin layer (DESIGN-SYSTEM.md) -------------------------------------------------------------------------- Loaded AFTER kakiso-tw.css. Pure visual override: it re-themes the utility classes the reseller dashboard views already use (slate/industrial palette, square corners) to the landing's language (lavender washes, ink text, magenta/indigo accents, generous radii, purple-tinted shadows). NO markup or behaviour depends on this file — deleting it restores the old look and nothing else changes. Scopes: .k-wrapper (dashboard app), .reseller-front-wrapper (front-page reseller browse), #catalogModal / #managerModal (catalog overlays). ========================================================================== */ /* ---- 1. Core components ------------------------------------------------ */ .k-card { background: #fff; border: 1px solid #f0e4fb; border-radius: 18px; padding: 24px; box-shadow: 0 12px 30px -20px rgba(80, 30, 120, 0.18); } .btn-primary { background: #5B2A9E; color: #fff; padding: 10px 22px; border: 1px solid transparent; border-radius: 100px; font-weight: 600; font-size: 12.5px; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 12px 24px -12px rgba(91, 42, 158, 0.55); transition: background .2s, transform .2s, box-shadow .2s; } .btn-primary:hover { background: #6d34ba; color: #fff; transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(91, 42, 158, 0.6); } /* Scrollbars — rounded, lavender */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) ::-webkit-scrollbar { width: 8px; height: 8px; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) ::-webkit-scrollbar-track { background: #f6f0fc; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) ::-webkit-scrollbar-thumb { background: #ddcdf0; border-radius: 100px; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) ::-webkit-scrollbar-thumb:hover { background: #c8b2e5; } :is(.k-wrapper, .reseller-front-wrapper) input { accent-color: #9f2089; } :is(.k-wrapper, .reseller-front-wrapper) ::selection { background: #f3d8ee; } /* ---- 2. Shape: kill the boxes ------------------------------------------ */ /* Every interactive element gets soft corners (type selector: any explicit rounded-* utility on the element still wins). */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(a, button) { border-radius: 11px; } /* Solid + outlined CTAs become THE pill (cards that are links stay cards) */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(a, button):is(.bg-\[\#0f172a\], .bg-slate-900, .bg-gray-800, .bg-gray-900):not(.k-card) { border-radius: 100px; box-shadow: 0 12px 24px -12px rgba(91, 42, 158, 0.5); } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(a, button).bg-white:not(.k-card) { border-radius: 100px; } /* Re-tuned radius scale (rounded-none is the boxy tell — round it) */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .rounded-none { border-radius: 14px; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .rounded-sm { border-radius: 9px; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .rounded { border-radius: 10px; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .rounded-md { border-radius: 12px; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .rounded-lg { border-radius: 14px; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .rounded-xl { border-radius: 16px; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .rounded-full { border-radius: 100px; } /* Icon tiles, thumbnails, status dots, badges */ :is(.k-wrapper, .reseller-front-wrapper) :is(div, span).w-8.h-8, :is(.k-wrapper, .reseller-front-wrapper) :is(div, span).w-9.h-9, :is(.k-wrapper, .reseller-front-wrapper) :is(div, span).w-10.h-10, :is(.k-wrapper, .reseller-front-wrapper) :is(div, span).w-12.h-12, :is(.k-wrapper, .reseller-front-wrapper) :is(div, span).w-14.h-14, :is(.k-wrapper, .reseller-front-wrapper) :is(div, span).w-16.h-16 { border-radius: 13px; } /* Content thumbnails only — NOT the sidebar/header logos (k-scroll-area is the dashboard content pane; chrome images like logo.png must never be clipped) */ :is(.k-scroll-area, .reseller-front-wrapper, #catalogModal, #managerModal) img { border-radius: 10px; } :is(.k-wrapper, .reseller-front-wrapper) :is(.k-logo-expanded, .k-logo-collapsed) img { border-radius: 0; } :is(.k-wrapper, .reseller-front-wrapper) :is(div, span).w-1\.5.h-1\.5, :is(.k-wrapper, .reseller-front-wrapper) :is(div, span).w-2.h-2 { border-radius: 50%; } :is(.k-wrapper, .reseller-front-wrapper) span.inline-flex { border-radius: 100px; } /* Progress bars: rounded track + brand gradient fill */ :is(.k-wrapper, .reseller-front-wrapper) :is(.h-1, .h-1\.5, .h-2)[class*="bg-"] { border-radius: 100px; } :is(.k-wrapper, .reseller-front-wrapper) :is(.h-1, .h-1\.5, .h-2)[style*="width"] { background: linear-gradient(90deg, #9f2089, #ff6b9d); border-radius: 100px; } /* Form controls */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { border-radius: 11px; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(input, select, textarea):focus { border-color: #9f2089; box-shadow: 0 0 0 4px rgba(159, 32, 137, 0.09); outline: none; } /* ---- 3. Colour: slate/navy -> ink & lavender --------------------------- */ /* Ink (headings / strong text) */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.text-\[\#0f172a\], .text-gray-900, .text-slate-900, .text-slate-800, .text-gray-800, .text-\[\#334155\], .text-slate-700) { color: #2b1a42; } /* Soft body grays -> purple-tinted grays */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.text-slate-600, .text-gray-700, .text-gray-600, .text-\[\#64748b\]) { color: #6b6480; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.text-slate-500, .text-gray-500) { color: #7d7492; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.text-slate-400, .text-gray-400, .text-\[\#94a3b8\]) { color: #9c92b2; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.text-slate-300, .text-gray-300) { color: #c4b8d6; } /* Blue accent family -> indigo/violet */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.text-blue-600, .text-blue-500, .text-\[\#3b82f6\]) { color: #6d34ba; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.text-blue-700, .text-\[\#1e40af\]) { color: #5B2A9E; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.text-blue-800, .text-\[\#1e3a8a\]) { color: #4a2382; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .text-blue-400 { color: #a78bfa; } /* Brand-purple tune-ups (violet -> true brand magenta) */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.text-purple-600, .text-\[\#a855f7\], .text-\[\#9333ea\]) { color: #9f2089; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.bg-\[\#a855f7\], .bg-purple-600) { background-color: #9f2089; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .bg-purple-50 { background-color: #fdf1f9; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .bg-\[\#f3e8ff\] { background-color: #f8edfc; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .text-purple-700 { color: #7a1868; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.border-\[\#9333ea\], .border-\[\#a855f7\]) { border-color: #9f2089; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .border-\[\#c084fc\] { border-color: #dbaed1; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.border-\[\#e9d5ff\], .border-purple-200) { border-color: #f0e4fb; } /* Surfaces: cold slate washes -> lavender washes */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.bg-slate-50, .bg-gray-50, .bg-\[\#f8fafc\]) { background-color: #faf7fd; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.bg-slate-100, .bg-gray-100, .bg-\[\#f1f5f9\]) { background-color: #f5eefb; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .bg-gray-200 { background-color: #ede2f8; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .bg-gray-300 { background-color: #e2d3f2; } /* Solid navy/black surfaces -> indigo / deep purple ink */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.bg-\[\#0f172a\], .bg-slate-900) { background-color: #5B2A9E; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.bg-gray-800, .bg-gray-900, .bg-black) { background-color: #2b1a42; } /* Blue fills -> violet */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.bg-blue-50, .bg-blue-100) { background-color: #f1e9fd; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.bg-blue-500, .bg-blue-600, .bg-blue-700) { background-color: #6d34ba; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .bg-blue-400 { background-color: #c02ba4; } /* Borders: cold gray -> lavender */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.border-gray-50, .border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200, .border-\[\#e2e8f0\]) { border-color: #f0e4fb; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.border-gray-300, .border-slate-300, .border-\[\#cbd5e1\]) { border-color: #e6d7f6; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.border-gray-400, .border-slate-400) { border-color: #d9c7f0; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.border-\[\#0f172a\], .border-slate-900, .border-gray-600, .border-gray-700, .border-gray-800) { border-color: #5B2A9E; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .border-blue-200 { border-color: #e2d4f8; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.border-blue-300, .border-\[\#93c5fd\]) { border-color: #d9c7f2; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.border-blue-500, .border-blue-600, .border-blue-700, .border-\[\#3b82f6\]) { border-color: #6d34ba; } /* divide-* utilities set child borders */ :is(.k-wrapper, .reseller-front-wrapper) :is(.divide-gray-100, .divide-gray-200, .divide-slate-100, .divide-slate-200) > :not([hidden]) ~ :not([hidden]) { border-color: #f4ebfc; } /* ---- 4. Hover / focus / group states ----------------------------------- */ :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.hover\:bg-slate-50:hover, .hover\:bg-gray-50:hover) { background-color: #f8f2fd; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.hover\:bg-slate-100:hover, .hover\:bg-gray-100:hover) { background-color: #f3eafb; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .hover\:bg-\[\#0f172a\]:hover { background-color: #5B2A9E; border-color: #5B2A9E; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .hover\:bg-black:hover { background-color: #6d34ba; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover) { background-color: #5B2A9E; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .hover\:bg-gray-800:hover { background-color: #3d2a7d; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.hover\:text-\[\#0f172a\]:hover, .hover\:text-slate-800:hover, .hover\:text-gray-900:hover) { color: #2b1a42; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.hover\:text-blue-600:hover, .hover\:text-blue-700:hover) { color: #6d34ba; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) .hover\:border-\[\#0f172a\]:hover { border-color: #5B2A9E; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.hover\:border-blue-300:hover, .hover\:border-blue-500:hover) { border-color: #c9a8e8; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.focus\:border-blue-500:focus, .focus\:border-purple-600:focus) { border-color: #9f2089; } :is(.k-wrapper, .reseller-front-wrapper, #catalogModal, #managerModal) :is(.focus\:ring-blue-500:focus, .focus\:ring-purple-600:focus) { --tw-ring-color: #9f2089; } /* Dark CTAs whose hover flips to white: keep them saturated instead (white-flip children would lose contrast), lift like the landing pills. */ :is(.k-wrapper, .reseller-front-wrapper) :is(a, button, .k-card):is(.bg-\[\#0f172a\], .bg-slate-900).hover\:bg-white:hover { background-color: #6d34ba !important; } :is(.k-wrapper, .reseller-front-wrapper) :is(.bg-\[\#0f172a\], .bg-slate-900).hover\:bg-white:hover :is([class*="group-hover\:text-\[\#0f172a\]"], [class*="group-hover\:text-slate"]) { color: #fff !important; } :is(.k-wrapper, .reseller-front-wrapper) :is(.bg-\[\#0f172a\], .bg-slate-900).hover\:bg-white:hover [class*="group-hover\:bg-slate"] { background-color: rgba(255, 255, 255, 0.15) !important; } :is(.k-wrapper, .reseller-front-wrapper) :is(.bg-\[\#0f172a\], .bg-slate-900).hover\:bg-white:hover [class*="group-hover\:border-slate"] { border-color: rgba(255, 255, 255, 0.28) !important; } :is(.k-wrapper, .reseller-front-wrapper) :is(a, button):is(.bg-\[\#0f172a\], .bg-slate-900):is(.hover\:text-\[\#0f172a\]):hover { color: #fff; } /* White/outline buttons that used to flip to navy now flip to indigo (rule above recolors the bg; make sure text goes white with it) */ :is(.k-wrapper, .reseller-front-wrapper) .hover\:bg-\[\#0f172a\]:hover.hover\:text-white, :is(.k-wrapper, .reseller-front-wrapper) .hover\:bg-\[\#0f172a\].hover\:text-white:hover { color: #fff; } /* ---- 5. Typography polish ----------------------------------------------- */ :is(.k-wrapper, .reseller-front-wrapper) :is(h1, h2, h3) { letter-spacing: -0.015em; } :is(.k-wrapper, .reseller-front-wrapper) table thead th { font-weight: 700; } /* ---- 6. View components (out-specify the views' own