1007 lines
36 KiB
CSS
1007 lines
36 KiB
CSS
/* ===================================================================
|
|
IGNY8 DESIGN SYSTEM - SINGLE SOURCE OF TRUTH
|
|
===================================================================
|
|
|
|
This file consolidates ALL design tokens, color scales, utilities,
|
|
and component styles. Import this file in main.tsx/App.tsx.
|
|
|
|
🔒 STYLE LOCKED - All colors, spacing, and components must use
|
|
these tokens. See DESIGN_SYSTEM.md for usage guidelines.
|
|
|
|
⚠️ ONLY 6 HEX VALUES IN ENTIRE SYSTEM - Everything else derived!
|
|
⚠️ TAILWIND DEFAULT COLORS ARE DISABLED - THEY WON'T WORK!
|
|
⚠️ AI AGENTS: DO NOT USE blue-500, red-500, green-500, etc.
|
|
⚠️ USE ONLY: brand-*, success-*, warning-*, error-*, info-*, gray-*
|
|
|
|
Last Updated: 2026-01-01
|
|
=================================================================== */
|
|
|
|
/* Tailwind with ALL default colors DISABLED */
|
|
@import "tailwindcss";
|
|
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap") layer(base);
|
|
|
|
|
|
/* ===================================================================
|
|
THE 6 PRIMARY COLOR TOKENS - ONLY HEX VALUES ALLOWED HERE
|
|
===================================================================
|
|
All other colors in the system MUST derive from these 6 using color-mix().
|
|
This enables dynamic theming - change these 6 = entire app updates.
|
|
=================================================================== */
|
|
|
|
:root {
|
|
|
|
/* ===== CURRENT PALETTE ===== */
|
|
/*
|
|
--color-primary: #0077B6;
|
|
--color-success: #2CA18E;
|
|
--color-warning: #D9A12C;
|
|
--color-danger: #A12C40;
|
|
--color-info: #2C40A1;
|
|
--color-gray-base: #667085;
|
|
*/
|
|
|
|
/* ===== OPTION 1: MODERN SAAS ===== */
|
|
/*
|
|
--color-primary: #0D9488;
|
|
--color-success: #10B981;
|
|
--color-warning: #F59E0B;
|
|
--color-danger: #EF4444;
|
|
--color-info: #7C3AED;
|
|
--color-gray-base: #64748B;
|
|
*/
|
|
|
|
/* ===== OPTION 2: BOLD TECH ===== */
|
|
/*
|
|
--color-primary: #6366F1;
|
|
--color-success: #22C55E;
|
|
--color-warning: #FBBF24;
|
|
--color-danger: #F43F5E;
|
|
--color-info: #8B5CF6;
|
|
--color-gray-base: #6B7280;
|
|
*/
|
|
|
|
/* ===== OPTION 3: CLEAN MINIMAL ===== */
|
|
/*
|
|
--color-primary: #3B82F6;
|
|
--color-success: #059669;
|
|
--color-warning: #F97316;
|
|
--color-danger: #DC2626;
|
|
--color-info: #6366F1;
|
|
--color-gray-base: #475569;
|
|
*/
|
|
--color-primary: #1c86d1;
|
|
--color-success: #3fcd9f;
|
|
--color-warning: #f87f4c;
|
|
--color-danger: #ff656f;
|
|
--color-info: #18b2c4;
|
|
--color-gray-base: #243249;
|
|
/*
|
|
--color-primary: #3B82F6;
|
|
--color-success: #10B981;
|
|
--color-warning: #F59E0B;
|
|
--color-danger: #DC2626;
|
|
--color-info: #F63B82;
|
|
--color-gray-base: #30425d;
|
|
*/
|
|
|
|
/* ===================================================================
|
|
DERIVED COLORS - All computed from the 6 primaries above
|
|
=================================================================== */
|
|
|
|
/* Primary Variants (derived from --color-primary) */
|
|
--color-primary-dark: color-mix(in srgb, var(--color-primary) 75%, black);
|
|
--color-primary-light: color-mix(in srgb, var(--color-primary) 60%, white);
|
|
--color-primary-subtle: color-mix(in srgb, var(--color-primary) 10%, white);
|
|
|
|
/* Success Variants (derived from --color-success) */
|
|
--color-success-dark: color-mix(in srgb, var(--color-success) 75%, black);
|
|
--color-success-light: color-mix(in srgb, var(--color-success) 60%, white);
|
|
--color-success-subtle: color-mix(in srgb, var(--color-success) 10%, white);
|
|
|
|
/* Warning Variants (derived from --color-warning) */
|
|
--color-warning-dark: color-mix(in srgb, var(--color-warning) 75%, black);
|
|
--color-warning-light: color-mix(in srgb, var(--color-warning) 60%, white);
|
|
--color-warning-subtle: color-mix(in srgb, var(--color-warning) 10%, white);
|
|
|
|
/* Danger Variants (derived from --color-danger) */
|
|
--color-danger-dark: color-mix(in srgb, var(--color-danger) 75%, black);
|
|
--color-danger-light: color-mix(in srgb, var(--color-danger) 60%, white);
|
|
--color-danger-subtle: color-mix(in srgb, var(--color-danger) 10%, white);
|
|
|
|
/* Info Variants (derived from --color-info) */
|
|
--color-info-dark: color-mix(in srgb, var(--color-info) 75%, black);
|
|
--color-info-light: color-mix(in srgb, var(--color-info) 60%, white);
|
|
--color-info-subtle: color-mix(in srgb, var(--color-info) 10%, white);
|
|
|
|
/* ===================================================================
|
|
BACKGROUND COLORS (derived from primaries)
|
|
=================================================================== */
|
|
--color-navy: color-mix(in srgb, var(--color-gray-base) 25%, black);
|
|
--color-navy-light: color-mix(in srgb, var(--color-gray-base) 35%, black);
|
|
--color-surface: color-mix(in srgb, var(--color-gray-base) 3%, white);
|
|
--color-panel: #FFFFFF;
|
|
--color-panel-alt: color-mix(in srgb, var(--color-gray-base) 8%, white);
|
|
|
|
/* ===================================================================
|
|
TEXT COLORS (derived from gray-base)
|
|
=================================================================== */
|
|
--color-text: color-mix(in srgb, var(--color-gray-base) 30%, black);
|
|
--color-text-dim: var(--color-gray-base);
|
|
--color-text-light: color-mix(in srgb, var(--color-gray-base) 15%, white);
|
|
--color-stroke: color-mix(in srgb, var(--color-gray-base) 25%, white);
|
|
|
|
/* ===================================================================
|
|
BORDER RADIUS
|
|
=================================================================== */
|
|
--radius-xs: 2px;
|
|
--radius-sm: 4px;
|
|
--radius-base: 6px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 8px;
|
|
--radius-xl: 10px;
|
|
--radius-2xl: 12px;
|
|
--radius-full: 9999px;
|
|
|
|
/* ===================================================================
|
|
GRADIENTS (using CSS variables, not hex)
|
|
=================================================================== */
|
|
--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
|
--gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
|
|
--gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
|
|
--gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
|
|
--gradient-info: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
|
|
--gradient-panel: linear-gradient(180deg, var(--color-panel) 0%, var(--color-panel-alt) 100%);
|
|
|
|
/* ===================================================================
|
|
SHADOWS (using rgba with consistent opacity)
|
|
=================================================================== */
|
|
--shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
|
--shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
|
|
--shadow-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03);
|
|
--shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
/* ===================================================================
|
|
DARK MODE OVERRIDES (all derived from primaries)
|
|
=================================================================== */
|
|
.dark {
|
|
/* Backgrounds - derived from gray-base */
|
|
--color-surface: color-mix(in srgb, var(--color-gray-base) 26%, black);
|
|
--color-panel: color-mix(in srgb, var(--color-gray-base) 40%, black);
|
|
--color-panel-alt: color-mix(in srgb, var(--color-gray-base) 28%, black);
|
|
|
|
/* Text - derived from gray-base */
|
|
--color-text: color-mix(in srgb, var(--color-gray-base) 10%, white);
|
|
--color-text-dim: color-mix(in srgb, var(--color-gray-base) 40%, white);
|
|
--color-stroke: color-mix(in srgb, var(--color-gray-base) 62%, black);
|
|
|
|
/* Shadows for dark mode */
|
|
--shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
|
|
--shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
|
|
--shadow-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.4), 0px 2px 4px -2px rgba(0, 0, 0, 0.2);
|
|
--shadow-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.4), 0px 4px 6px -2px rgba(0, 0, 0, 0.2);
|
|
--shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.5), 0px 8px 8px -4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
|
|
|
|
/* ===================================================================
|
|
SECTION 3: TAILWIND CONFIGURATION
|
|
=================================================================== */
|
|
|
|
/* ===================================================================
|
|
KEYWORDS LIBRARY - SECTOR CARDS
|
|
=================================================================== */
|
|
|
|
.keywords-library-sector-grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.keywords-library-sector-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
}
|
|
}
|
|
|
|
.keywords-library-sector-card {
|
|
padding: 16px;
|
|
border-radius: var(--radius-xl);
|
|
border: 1px solid var(--color-stroke);
|
|
background: var(--color-panel);
|
|
box-shadow: var(--shadow-sm);
|
|
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.keywords-library-sector-card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-stroke));
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.keywords-library-sector-card.is-active {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent), var(--shadow-md);
|
|
}
|
|
|
|
.keywords-library-sector-card .sector-card-accent {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
background: var(--gradient-primary);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.keywords-library-sector-card .sector-card-active-dot {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 999px;
|
|
background: var(--color-primary);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
|
|
}
|
|
|
|
.keywords-library-sector-card .sector-stats-pill {
|
|
border-radius: var(--radius-lg);
|
|
background: var(--color-panel-alt);
|
|
border: 1px solid var(--color-stroke);
|
|
padding: 8px;
|
|
}
|
|
|
|
.keywords-library-sector-card .sector-stats-pill .label {
|
|
color: var(--color-text-dim);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.keywords-library-sector-card .sector-stats-pill .value {
|
|
color: var(--color-text);
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/*
|
|
🚫 TAILWIND DEFAULT COLORS ARE DISABLED
|
|
|
|
Only these color palettes are available:
|
|
- brand-* (primary blue)
|
|
- gray-* (neutrals)
|
|
- success-* (green)
|
|
- error-* (red)
|
|
- warning-* (amber)
|
|
- info-* (info/accent)
|
|
|
|
❌ These will NOT work: blue-*, red-*, green-*, emerald-*,
|
|
amber-*, indigo-*, pink-*, rose-*, sky-*, teal-*, etc.
|
|
*/
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme {
|
|
/* -----------------------------------------------------------------
|
|
DISABLE ALL TAILWIND DEFAULT COLOR PALETTES
|
|
This forces use of design system colors only
|
|
----------------------------------------------------------------- */
|
|
--color-red-*: initial;
|
|
--color-orange-*: initial;
|
|
--color-amber-*: initial;
|
|
--color-yellow-*: initial;
|
|
--color-lime-*: initial;
|
|
--color-green-*: initial;
|
|
--color-emerald-*: initial;
|
|
--color-teal-*: initial;
|
|
--color-cyan-*: initial;
|
|
--color-sky-*: initial;
|
|
--color-blue-*: initial;
|
|
--color-indigo-*: initial;
|
|
--color-violet-*: initial;
|
|
--color-fuchsia-*: initial;
|
|
--color-pink-*: initial;
|
|
--color-rose-*: initial;
|
|
--color-slate-*: initial;
|
|
--color-zinc-*: initial;
|
|
--color-neutral-*: initial;
|
|
--color-stone-*: initial;
|
|
|
|
/* -----------------------------------------------------------------
|
|
BORDER RADIUS (Override Tailwind defaults)
|
|
----------------------------------------------------------------- */
|
|
--radius-xs: 2px;
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 8px;
|
|
--radius-xl: 10px;
|
|
--radius-2xl: 12px;
|
|
--radius-3xl: 16px;
|
|
--radius-4xl: 20px;
|
|
|
|
/* -----------------------------------------------------------------
|
|
FONTS
|
|
----------------------------------------------------------------- */
|
|
--font-outfit: Outfit, sans-serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
|
|
/* -----------------------------------------------------------------
|
|
BREAKPOINTS
|
|
----------------------------------------------------------------- */
|
|
--breakpoint-2xsm: 375px;
|
|
--breakpoint-xsm: 425px;
|
|
--breakpoint-sm: 640px;
|
|
--breakpoint-md: 768px;
|
|
--breakpoint-lg: 1024px;
|
|
--breakpoint-xl: 1280px;
|
|
--breakpoint-2xl: 1536px;
|
|
--breakpoint-3xl: 2000px;
|
|
|
|
/* -----------------------------------------------------------------
|
|
TYPOGRAPHY
|
|
----------------------------------------------------------------- */
|
|
--text-title-2xl: 72px;
|
|
--text-title-2xl--line-height: 90px;
|
|
--text-title-xl: 60px;
|
|
--text-title-xl--line-height: 72px;
|
|
--text-title-lg: 48px;
|
|
--text-title-lg--line-height: 60px;
|
|
--text-title-md: 36px;
|
|
--text-title-md--line-height: 44px;
|
|
--text-title-sm: 30px;
|
|
--text-title-sm--line-height: 38px;
|
|
--text-theme-xl: 20px;
|
|
--text-theme-xl--line-height: 30px;
|
|
--text-theme-sm: 14px;
|
|
--text-theme-sm--line-height: 20px;
|
|
--text-theme-xs: 12px;
|
|
--text-theme-xs--line-height: 18px;
|
|
|
|
/* -----------------------------------------------------------------
|
|
BASE COLORS
|
|
----------------------------------------------------------------- */
|
|
--color-current: currentColor;
|
|
--color-transparent: transparent;
|
|
--color-white: #ffffff;
|
|
--color-black: color-mix(in srgb, var(--color-gray-base) 15%, black);
|
|
|
|
/* -----------------------------------------------------------------
|
|
BRAND COLOR SCALE (ALL derived from --color-primary)
|
|
----------------------------------------------------------------- */
|
|
--color-brand-25: color-mix(in srgb, var(--color-primary) 3%, white);
|
|
--color-brand-50: color-mix(in srgb, var(--color-primary) 8%, white);
|
|
--color-brand-100: color-mix(in srgb, var(--color-primary) 15%, white);
|
|
--color-brand-200: color-mix(in srgb, var(--color-primary) 25%, white);
|
|
--color-brand-300: color-mix(in srgb, var(--color-primary) 40%, white);
|
|
--color-brand-400: color-mix(in srgb, var(--color-primary) 60%, white);
|
|
--color-brand-500: var(--color-primary);
|
|
--color-brand-600: color-mix(in srgb, var(--color-primary) 85%, black);
|
|
--color-brand-700: color-mix(in srgb, var(--color-primary) 70%, black);
|
|
--color-brand-800: color-mix(in srgb, var(--color-primary) 55%, black);
|
|
--color-brand-900: color-mix(in srgb, var(--color-primary) 40%, black);
|
|
--color-brand-950: color-mix(in srgb, var(--color-primary) 25%, black);
|
|
|
|
/* -----------------------------------------------------------------
|
|
GRAY SCALE (ALL derived from --color-gray-base)
|
|
----------------------------------------------------------------- */
|
|
--color-gray-25: color-mix(in srgb, var(--color-gray-base) 2%, white);
|
|
--color-gray-50: color-mix(in srgb, var(--color-gray-base) 4%, white);
|
|
--color-gray-100: color-mix(in srgb, var(--color-gray-base) 8%, white);
|
|
--color-gray-200: color-mix(in srgb, var(--color-gray-base) 15%, white);
|
|
--color-gray-300: color-mix(in srgb, var(--color-gray-base) 25%, white);
|
|
--color-gray-400: color-mix(in srgb, var(--color-gray-base) 50%, white);
|
|
--color-gray-500: var(--color-gray-base);
|
|
--color-gray-600: color-mix(in srgb, var(--color-gray-base) 85%, black);
|
|
--color-gray-700: color-mix(in srgb, var(--color-gray-base) 70%, black);
|
|
--color-gray-800: color-mix(in srgb, var(--color-gray-base) 55%, black);
|
|
--color-gray-900: color-mix(in srgb, var(--color-gray-base) 40%, black);
|
|
--color-gray-950: color-mix(in srgb, var(--color-gray-base) 25%, black);
|
|
--color-gray-dark: color-mix(in srgb, var(--color-gray-base) 30%, black);
|
|
|
|
/* -----------------------------------------------------------------
|
|
SUCCESS SCALE (ALL derived from --color-success)
|
|
----------------------------------------------------------------- */
|
|
--color-success-25: color-mix(in srgb, var(--color-success) 2%, white);
|
|
--color-success-50: color-mix(in srgb, var(--color-success) 6%, white);
|
|
--color-success-100: color-mix(in srgb, var(--color-success) 15%, white);
|
|
--color-success-200: color-mix(in srgb, var(--color-success) 30%, white);
|
|
--color-success-300: color-mix(in srgb, var(--color-success) 50%, white);
|
|
--color-success-400: color-mix(in srgb, var(--color-success) 75%, white);
|
|
--color-success-500: var(--color-success);
|
|
--color-success-600: color-mix(in srgb, var(--color-success) 85%, black);
|
|
--color-success-700: color-mix(in srgb, var(--color-success) 70%, black);
|
|
--color-success-800: color-mix(in srgb, var(--color-success) 55%, black);
|
|
--color-success-900: color-mix(in srgb, var(--color-success) 40%, black);
|
|
--color-success-950: color-mix(in srgb, var(--color-success) 25%, black);
|
|
|
|
/* -----------------------------------------------------------------
|
|
ERROR SCALE (ALL derived from --color-danger)
|
|
----------------------------------------------------------------- */
|
|
--color-error-25: color-mix(in srgb, var(--color-danger) 2%, white);
|
|
--color-error-50: color-mix(in srgb, var(--color-danger) 5%, white);
|
|
--color-error-100: color-mix(in srgb, var(--color-danger) 10%, white);
|
|
--color-error-200: color-mix(in srgb, var(--color-danger) 20%, white);
|
|
--color-error-300: color-mix(in srgb, var(--color-danger) 40%, white);
|
|
--color-error-400: color-mix(in srgb, var(--color-danger) 65%, white);
|
|
--color-error-500: var(--color-danger);
|
|
--color-error-600: color-mix(in srgb, var(--color-danger) 85%, black);
|
|
--color-error-700: color-mix(in srgb, var(--color-danger) 70%, black);
|
|
--color-error-800: color-mix(in srgb, var(--color-danger) 55%, black);
|
|
--color-error-900: color-mix(in srgb, var(--color-danger) 40%, black);
|
|
--color-error-950: color-mix(in srgb, var(--color-danger) 25%, black);
|
|
|
|
/* -----------------------------------------------------------------
|
|
WARNING SCALE (ALL derived from --color-warning)
|
|
----------------------------------------------------------------- */
|
|
--color-warning-25: color-mix(in srgb, var(--color-warning) 2%, white);
|
|
--color-warning-50: color-mix(in srgb, var(--color-warning) 4%, white);
|
|
--color-warning-100: color-mix(in srgb, var(--color-warning) 10%, white);
|
|
--color-warning-200: color-mix(in srgb, var(--color-warning) 20%, white);
|
|
--color-warning-300: color-mix(in srgb, var(--color-warning) 40%, white);
|
|
--color-warning-400: color-mix(in srgb, var(--color-warning) 65%, white);
|
|
--color-warning-500: var(--color-warning);
|
|
--color-warning-600: color-mix(in srgb, var(--color-warning) 85%, black);
|
|
--color-warning-700: color-mix(in srgb, var(--color-warning) 70%, black);
|
|
--color-warning-800: color-mix(in srgb, var(--color-warning) 55%, black);
|
|
--color-warning-900: color-mix(in srgb, var(--color-warning) 40%, black);
|
|
--color-warning-950: color-mix(in srgb, var(--color-warning) 25%, black);
|
|
|
|
/* -----------------------------------------------------------------
|
|
INFO SCALE (ALL derived from --color-info)
|
|
----------------------------------------------------------------- */
|
|
--color-info-25: color-mix(in srgb, var(--color-info) 2%, white);
|
|
--color-info-50: color-mix(in srgb, var(--color-info) 8%, white);
|
|
--color-info-100: color-mix(in srgb, var(--color-info) 15%, white);
|
|
--color-info-200: color-mix(in srgb, var(--color-info) 25%, white);
|
|
--color-info-300: color-mix(in srgb, var(--color-info) 40%, white);
|
|
--color-info-400: color-mix(in srgb, var(--color-info) 60%, white);
|
|
--color-info-500: var(--color-info);
|
|
--color-info-600: color-mix(in srgb, var(--color-info) 85%, black);
|
|
--color-info-700: color-mix(in srgb, var(--color-info) 70%, black);
|
|
--color-info-800: color-mix(in srgb, var(--color-info) 55%, black);
|
|
--color-info-900: color-mix(in srgb, var(--color-info) 40%, black);
|
|
--color-info-950: color-mix(in srgb, var(--color-info) 25%, black);
|
|
|
|
/* -----------------------------------------------------------------
|
|
INFO/BLUE-LIGHT SCALE (derived from --color-primary for consistency)
|
|
----------------------------------------------------------------- */
|
|
--color-blue-light-25: color-mix(in srgb, var(--color-primary) 2%, white);
|
|
--color-blue-light-50: color-mix(in srgb, var(--color-primary) 5%, white);
|
|
--color-blue-light-100: color-mix(in srgb, var(--color-primary) 12%, white);
|
|
--color-blue-light-200: color-mix(in srgb, var(--color-primary) 25%, white);
|
|
--color-blue-light-300: color-mix(in srgb, var(--color-primary) 45%, white);
|
|
--color-blue-light-400: color-mix(in srgb, var(--color-primary) 70%, white);
|
|
--color-blue-light-500: color-mix(in srgb, var(--color-primary) 90%, white);
|
|
--color-blue-light-600: var(--color-primary);
|
|
--color-blue-light-700: color-mix(in srgb, var(--color-primary) 85%, black);
|
|
|
|
/* -----------------------------------------------------------------
|
|
SHADOWS (Tailwind integration)
|
|
----------------------------------------------------------------- */
|
|
--shadow-theme-xs: var(--shadow-xs);
|
|
--shadow-theme-sm: var(--shadow-sm);
|
|
--shadow-theme-md: var(--shadow-md);
|
|
--shadow-theme-lg: var(--shadow-lg);
|
|
--shadow-theme-xl: var(--shadow-xl);
|
|
--drop-shadow-4xl: 0 35px 35px rgba(0, 0, 0, 0.25), 0 45px 65px rgba(0, 0, 0, 0.15);
|
|
|
|
/* -----------------------------------------------------------------
|
|
Z-INDEX
|
|
----------------------------------------------------------------- */
|
|
--z-index-1: 1;
|
|
--z-index-9: 9;
|
|
--z-index-99: 99;
|
|
--z-index-999: 999;
|
|
--z-index-9999: 9999;
|
|
--z-index-99999: 99999;
|
|
--z-index-999999: 999999;
|
|
}
|
|
|
|
|
|
/* ===================================================================
|
|
SECTION 4: BASE STYLES
|
|
=================================================================== */
|
|
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
|
|
button:not(:disabled),
|
|
[role="button"]:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
body {
|
|
@apply relative font-normal font-outfit z-1 bg-gray-50;
|
|
}
|
|
|
|
/* Hide date/time picker arrows */
|
|
input[type="date"]::-webkit-inner-spin-button,
|
|
input[type="time"]::-webkit-inner-spin-button,
|
|
input[type="date"]::-webkit-calendar-picker-indicator,
|
|
input[type="time"]::-webkit-calendar-picker-indicator {
|
|
display: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* ===================================================================
|
|
SECTION 5: COMPONENT UTILITIES
|
|
=================================================================== */
|
|
|
|
/* -----------------------------------------------------------------
|
|
5.1 MENU ITEMS (Sidebar Navigation)
|
|
----------------------------------------------------------------- */
|
|
|
|
@utility menu-item {
|
|
@apply relative flex items-center w-full gap-3 px-3 font-medium rounded-lg text-theme-sm;
|
|
padding-top: 7px;
|
|
padding-bottom: 7px;
|
|
}
|
|
|
|
@utility menu-item-active {
|
|
@apply bg-brand-50 text-brand-600 dark:bg-brand-500/[0.18] dark:text-brand-300;
|
|
}
|
|
|
|
@utility menu-item-inactive {
|
|
@apply text-gray-600 hover:bg-gray-100 group-hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-800/70 dark:hover:text-white/90;
|
|
}
|
|
|
|
@utility menu-item-icon-size {
|
|
@apply w-5 h-5 flex-shrink-0;
|
|
& svg { width: 100%; height: 100%; }
|
|
}
|
|
|
|
@utility menu-item-icon-active {
|
|
@apply text-brand-600 dark:text-brand-300;
|
|
}
|
|
|
|
@utility menu-item-icon-inactive {
|
|
@apply text-gray-400 group-hover:text-gray-700 dark:text-gray-300 dark:group-hover:text-white/90;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
5.2 DROPDOWN MENU ITEMS
|
|
----------------------------------------------------------------- */
|
|
|
|
@utility menu-dropdown-item {
|
|
@apply block px-3 py-1.5 text-theme-sm font-medium rounded-md transition-colors;
|
|
}
|
|
|
|
@utility menu-dropdown-item-active {
|
|
@apply text-brand-600 bg-brand-50 dark:text-brand-300 dark:bg-brand-500/[0.14];
|
|
}
|
|
|
|
@utility menu-dropdown-item-inactive {
|
|
@apply text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-300 dark:hover:text-white/90 dark:hover:bg-gray-800/70;
|
|
}
|
|
|
|
@utility menu-dropdown-badge {
|
|
@apply px-1.5 py-0.5 text-xs font-medium rounded;
|
|
}
|
|
|
|
@utility menu-dropdown-badge-active {
|
|
@apply bg-brand-100 text-brand-700 dark:bg-brand-500/[0.18] dark:text-brand-300;
|
|
}
|
|
|
|
@utility menu-dropdown-badge-inactive {
|
|
@apply bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300;
|
|
}
|
|
|
|
|
|
/* ===================================================================
|
|
SECTION 6: FORM ELEMENT STYLES
|
|
=================================================================== */
|
|
|
|
/* Styled Select/Dropdown with custom chevron - for native <select> elements */
|
|
select.igny8-select-styled {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23647085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: right 12px center !important;
|
|
padding-right: 36px !important;
|
|
border: 1px solid var(--color-stroke) !important;
|
|
background-color: var(--color-panel) !important;
|
|
color: var(--color-text) !important;
|
|
}
|
|
|
|
.dark select.igny8-select-styled {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
|
|
background-color: var(--color-panel) !important;
|
|
border-color: var(--color-stroke) !important;
|
|
color: var(--color-text) !important;
|
|
}
|
|
|
|
/* For button-based selects (SelectDropdown), icon is rendered by component */
|
|
button.igny8-select-styled {
|
|
/* No background-image - ChevronDownIcon is rendered inside the component */
|
|
border: 1px solid var(--color-stroke);
|
|
background-color: var(--color-panel);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.dark button.igny8-select-styled {
|
|
border-color: var(--color-stroke);
|
|
background-color: var(--color-panel);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* Global form surface refinement */
|
|
input:not([type="checkbox"]):not([type="radio"]),
|
|
textarea,
|
|
select {
|
|
border-color: var(--color-stroke);
|
|
background-color: var(--color-panel);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.dark input:not([type="checkbox"]):not([type="radio"]),
|
|
.dark textarea,
|
|
.dark select {
|
|
border-color: var(--color-stroke);
|
|
background-color: var(--color-panel);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
|
|
}
|
|
|
|
/* Dark mode surface boosts for cards and panels */
|
|
.dark .dark\:bg-white\/\[0\.03\] {
|
|
background-color: color-mix(in srgb, var(--color-panel) 92%, transparent) !important;
|
|
}
|
|
|
|
.dark .dark\:bg-white\/\[0\.04\] {
|
|
background-color: color-mix(in srgb, var(--color-panel) 95%, transparent) !important;
|
|
}
|
|
|
|
.dark .dark\:bg-white\/\[0\.08\] {
|
|
background-color: color-mix(in srgb, var(--color-panel) 88%, transparent) !important;
|
|
}
|
|
|
|
.dark .dark\:bg-gray-800\/50,
|
|
.dark .dark\:bg-gray-800\/40,
|
|
.dark .dark\:bg-gray-800\/30,
|
|
.dark .dark\:bg-gray-900\/50 {
|
|
background-color: color-mix(in srgb, var(--color-panel) 75%, transparent) !important;
|
|
}
|
|
|
|
.dark .dark\:border-gray-800,
|
|
.dark .dark\:border-gray-700,
|
|
.dark .dark\:border-white\/10,
|
|
.dark .dark\:border-white\/\[0\.08\],
|
|
.dark .dark\:border-white\/\[0\.04\] {
|
|
border-color: var(--color-stroke) !important;
|
|
}
|
|
|
|
/* Sidebar boundary clarity */
|
|
.dark aside.border-r {
|
|
border-right-color: var(--color-stroke) !important;
|
|
box-shadow: inset -1px 0 0 color-mix(in srgb, var(--color-gray-base) 55%, black);
|
|
}
|
|
|
|
/* Checkbox styling */
|
|
.tableCheckbox:checked ~ span span { @apply opacity-100; }
|
|
.tableCheckbox:checked ~ span { @apply border-brand-500 bg-brand-500; }
|
|
|
|
|
|
/* ===================================================================
|
|
SECTION 7: TABLE STYLES
|
|
=================================================================== */
|
|
|
|
/* Global Table Font Size */
|
|
.igny8-table-compact th,
|
|
.igny8-table-compact td {
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
/* Compact Table Headers */
|
|
.igny8-table-compact th {
|
|
padding: 8px 12px !important;
|
|
font-weight: 500 !important;
|
|
color: var(--color-text-dim) !important;
|
|
text-align: left !important;
|
|
background-color: var(--color-surface) !important;
|
|
border-bottom: 1px solid var(--color-stroke) !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
.dark .igny8-table-compact th {
|
|
color: var(--color-text-dim) !important;
|
|
background-color: var(--color-panel-alt) !important;
|
|
border-bottom-color: var(--color-stroke) !important;
|
|
}
|
|
|
|
.igny8-table-compact td {
|
|
padding: 8px !important;
|
|
line-height: 1.4 !important;
|
|
border-bottom: 1px solid var(--color-stroke) !important;
|
|
}
|
|
|
|
.dark .igny8-table-compact td {
|
|
border-bottom-color: var(--color-stroke) !important;
|
|
}
|
|
|
|
/* Table row hover (subtle) */
|
|
.igny8-table-compact tbody tr:hover td {
|
|
background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
|
|
}
|
|
|
|
.dark .igny8-table-compact tbody tr:hover td {
|
|
background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
|
|
}
|
|
|
|
.igny8-table-compact th.text-center,
|
|
.igny8-table-compact td.text-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Smooth Table Height Transitions */
|
|
.igny8-table-container {
|
|
min-height: 500px;
|
|
transition: min-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
will-change: min-height;
|
|
}
|
|
|
|
.igny8-table-container.loading {
|
|
min-height: 500px;
|
|
overflow: hidden !important;
|
|
contain: layout style paint;
|
|
}
|
|
|
|
.igny8-table-container.loaded {
|
|
min-height: auto;
|
|
overflow: visible;
|
|
transition: min-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
animation: fadeInContainer 0.3s ease-out;
|
|
}
|
|
|
|
.igny8-table-wrapper {
|
|
width: 100%;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
|
|
transition: opacity 0.4s ease-in-out;
|
|
contain: layout;
|
|
}
|
|
|
|
.igny8-table-smooth {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
min-width: 100%;
|
|
transition: opacity 0.5s ease-in-out;
|
|
contain: layout;
|
|
}
|
|
|
|
.igny8-table-body {
|
|
position: relative;
|
|
min-height: 450px;
|
|
transition: min-height 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-in-out;
|
|
contain: layout;
|
|
}
|
|
|
|
.igny8-data-row {
|
|
animation: fadeInRow 0.6s ease-out forwards;
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
|
|
.igny8-skeleton-row {
|
|
animation: none !important;
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
display: table-row !important;
|
|
}
|
|
|
|
|
|
/* ===================================================================
|
|
SECTION 8: HEADER METRICS BAR
|
|
=================================================================== */
|
|
|
|
.igny8-header-metrics {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
background: transparent;
|
|
border-radius: var(--radius-sm);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.dark .igny8-header-metrics {
|
|
background: transparent;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.igny8-header-metric {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.igny8-header-metric-separator {
|
|
width: 1px;
|
|
height: 16px;
|
|
background: var(--color-stroke);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.dark .igny8-header-metric-separator {
|
|
background: var(--color-stroke);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.igny8-header-metric-label {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
text-transform: capitalize;
|
|
letter-spacing: 0.3px;
|
|
color: var(--color-text-dim);
|
|
}
|
|
|
|
.dark .igny8-header-metric-label {
|
|
color: var(--color-text-dim);
|
|
}
|
|
|
|
.igny8-header-metric-value {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.igny8-header-metric-value-credits {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.dark .igny8-header-metric-value {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.igny8-header-metric-accent {
|
|
width: 4px;
|
|
height: 20px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.igny8-header-metric-accent.blue { background: var(--color-primary); }
|
|
.igny8-header-metric-accent.green { background: var(--color-success); }
|
|
.igny8-header-metric-accent.amber { background: var(--color-warning); }
|
|
.igny8-header-metric-accent.purple { background: var(--color-info); }
|
|
|
|
|
|
/* ===================================================================
|
|
SECTION 9: BADGE SPECIAL STYLES
|
|
=================================================================== */
|
|
|
|
.difficulty-badge {
|
|
border-radius: 3px !important;
|
|
min-width: 28px !important;
|
|
display: inline-flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
.difficulty-badge.difficulty-very-hard {
|
|
background-color: var(--color-error-600) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.dark .difficulty-badge.difficulty-very-hard {
|
|
background-color: var(--color-error-600) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
|
|
/* ===================================================================
|
|
SECTION 10: CHART LIBRARY OVERRIDES (ApexCharts)
|
|
=================================================================== */
|
|
|
|
.apexcharts-legend-text { @apply !text-gray-700 dark:!text-gray-400; }
|
|
.apexcharts-text { @apply !fill-gray-700 dark:!fill-gray-400; }
|
|
.apexcharts-tooltip.apexcharts-theme-light { @apply gap-1 !rounded-lg !border-gray-200 p-3 !shadow-theme-sm dark:!border-gray-800 dark:!bg-gray-900; }
|
|
.apexcharts-tooltip-marker { margin-right: 6px; height: 6px; width: 6px; }
|
|
.apexcharts-legend-text { @apply !pl-5 !text-gray-700 dark:!text-gray-400; }
|
|
.apexcharts-tooltip-series-group { @apply !p-0; }
|
|
.apexcharts-tooltip-y-group { @apply !p-0; }
|
|
.apexcharts-tooltip-title { @apply !mb-0 !border-b-0 !bg-transparent !p-0 !text-[10px] !leading-4 !text-gray-800 dark:!text-white/90; }
|
|
.apexcharts-tooltip-text { @apply !text-theme-xs !text-gray-700 dark:!text-white/90; }
|
|
.apexcharts-tooltip-text-y-value { @apply !font-medium; }
|
|
.apexcharts-gridline { @apply !stroke-gray-100 dark:!stroke-gray-800; }
|
|
#chartTwo .apexcharts-datalabels-group { @apply !-translate-y-24; }
|
|
#chartTwo .apexcharts-datalabels-group .apexcharts-text { @apply !fill-gray-800 !font-semibold dark:!fill-white/90; }
|
|
#chartDarkStyle .apexcharts-datalabels-group .apexcharts-text { @apply !fill-gray-800 !font-semibold dark:!fill-white/90; }
|
|
#chartSixteen .apexcharts-legend { @apply !p-0 !pl-6; }
|
|
|
|
|
|
/* ===================================================================
|
|
SECTION 11: MAP LIBRARY OVERRIDES (jVectorMap)
|
|
=================================================================== */
|
|
|
|
.jvectormap-container { @apply !bg-gray-50 dark:!bg-gray-900; }
|
|
.jvectormap-region.jvectormap-element { @apply !fill-gray-300 hover:!fill-brand-500 dark:!fill-gray-700 dark:hover:!fill-brand-500; }
|
|
.jvectormap-marker.jvectormap-element { @apply !stroke-gray-200 dark:!stroke-gray-800; }
|
|
.jvectormap-tip { @apply !bg-brand-500 !border-none !px-2 !py-1; }
|
|
.jvectormap-zoomin, .jvectormap-zoomout { @apply !bg-brand-500; }
|
|
|
|
|
|
/* ===================================================================
|
|
SECTION 12: UTILITY CLASSES
|
|
=================================================================== */
|
|
|
|
/* Task dividers */
|
|
.task-item + .task-item { @apply !border-t-gray-200 dark:!border-t-gray-700; }
|
|
|
|
/* Date picker custom styling */
|
|
.custom-input-date input::-webkit-calendar-picker-indicator {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Scrollbar hiding */
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
|
|
/* Chat/Inbox heights */
|
|
.chat-height { height: calc(100vh - 8.125rem); }
|
|
.inbox-height { height: calc(100vh - 8.125rem); }
|
|
|
|
/* Filter bar */
|
|
.igny8-filter-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
|
|
/* ===================================================================
|
|
SECTION 13: ANIMATIONS
|
|
=================================================================== */
|
|
|
|
@keyframes slide-in-right {
|
|
from { opacity: 0; transform: translateX(100%); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes fadeInContainer {
|
|
from { opacity: 0.95; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fadeInRow {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes showScrollbar {
|
|
from { scrollbar-width: none; }
|
|
to { scrollbar-width: thin; }
|
|
}
|
|
|
|
.animate-slide-in-right {
|
|
animation: slide-in-right 0.3s ease-out;
|
|
}
|
|
|
|
|
|
/* ===================================================================
|
|
END OF DESIGN SYSTEM
|
|
=================================================================== */
|