/* ═══════════════════════════════════════════════════════════════════ CHAOZCODE DESIGN SYSTEM — Global CSS Cyberpunk purple matrix theme · Dark-first · Utility-enriched ═══════════════════════════════════════════════════════════════════ */ /* Tailwind CSS is compiled into each React app's own bundle — not needed here */ /* ─── CSS Custom Properties (Design Tokens) ─── */ :root { /* Backgrounds */ --cx-bg-void: #020617; --cx-bg-deep: #030712; --cx-bg-base: #0a0e1a; --cx-bg-surface: #10152a; --cx-bg-raised: #1a1f38; --cx-bg-overlay: rgba(3, 7, 18, 0.85); /* Purple Spectrum */ --cx-purple-50: #faf5ff; --cx-purple-100: #f3e8ff; --cx-purple-200: #e9d5ff; --cx-purple-300: #d8b4fe; --cx-purple-400: #c084fc; --cx-purple-500: #a855f7; --cx-purple-600: #9333ea; --cx-purple-700: #7c3aed; --cx-purple-800: #6d28d9; --cx-purple-900: #4c1d95; /* Semantic Colors */ --cx-accent: var(--cx-purple-500); --cx-accent-glow: var(--cx-purple-400); --cx-success: #34d399; --cx-warning: #fbbf24; --cx-danger: #f87171; --cx-info: #60a5fa; /* Text */ --cx-text-primary: var(--cx-purple-200); --cx-text-secondary:#8e8fa8; --cx-text-muted: #7e7f9a; --cx-text-ghost: #62637e; /* Borders — derived from accent for dynamic theming */ --cx-border: color-mix(in srgb, var(--cx-accent) 15%, transparent); --cx-border-hover: color-mix(in srgb, var(--cx-accent) 40%, transparent); --cx-border-active: color-mix(in srgb, var(--cx-accent) 60%, transparent); /* Glow — derived from accent for dynamic theming */ --cx-glow-sm: 0 0 8px color-mix(in srgb, var(--cx-accent) 15%, transparent); --cx-glow-md: 0 0 20px color-mix(in srgb, var(--cx-accent) 12%, transparent); --cx-glow-lg: 0 4px 40px color-mix(in srgb, var(--cx-accent) 10%, transparent); --cx-glow-text: 0 0 12px color-mix(in srgb, var(--cx-accent-glow) 40%, transparent); /* Spacing scale */ --cx-radius-sm: 0.375rem; --cx-radius-md: 0.5rem; --cx-radius-lg: 0.75rem; --cx-radius-xl: 1rem; /* Transitions */ --cx-ease: cubic-bezier(0.4, 0, 0.2, 1); --cx-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --cx-duration: 150ms; --cx-duration-slow: 300ms; /* Fonts */ --cx-font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Monaco', 'Menlo', monospace; --cx-font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; /* Spring Physics */ --cx-spring-snappy: cubic-bezier(0.22, 1.2, 0.36, 1); --cx-spring-bouncy: cubic-bezier(0.34, 1.8, 0.64, 1); --cx-spring-smooth: cubic-bezier(0.25, 1, 0.5, 1); --cx-spring-stiff: cubic-bezier(0.12, 0.8, 0.3, 1); /* Fluid Type Scale */ --cx-type-xs: clamp(0.625rem, 0.5rem + 0.25vw, 0.6875rem); --cx-type-sm: clamp(0.6875rem, 0.6rem + 0.3vw, 0.8125rem); --cx-type-base: clamp(0.75rem, 0.65rem + 0.4vw, 0.9375rem); --cx-type-md: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem); --cx-type-lg: clamp(1rem, 0.85rem + 0.6vw, 1.375rem); --cx-type-xl: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); --cx-type-2xl: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem); --cx-type-hero: clamp(2rem, 1.5rem + 2vw, 3.5rem); } /* ─── Theme Engine ─── */ /* Theme switching: set data-theme attribute on */ /* Default theme is Cyberpunk Purple (defined in :root) */ [data-theme="midnight"] { --cx-bg-void: #020820; --cx-bg-deep: #030a24; --cx-bg-base: #0a1628; --cx-bg-surface: #111f3a; --cx-bg-raised: #1a2d4d; --cx-purple-300: #93c5fd; --cx-purple-400: #60a5fa; --cx-purple-500: #3b82f6; --cx-purple-600: #2563eb; --cx-purple-700: #1d4ed8; --cx-accent: var(--cx-purple-500); --cx-accent-glow: var(--cx-purple-400); --cx-text-primary: #bfdbfe; --cx-border: rgba(59, 130, 246, 0.15); --cx-border-hover: rgba(59, 130, 246, 0.40); --cx-glow-sm: 0 0 8px rgba(59, 130, 246, 0.15); --cx-glow-md: 0 0 20px rgba(59, 130, 246, 0.12); --cx-glow-lg: 0 4px 40px rgba(59, 130, 246, 0.10); --cx-glow-text: 0 0 12px rgba(96, 165, 250, 0.4); } [data-theme="emerald"] { --cx-bg-void: #011a0a; --cx-bg-deep: #021f0e; --cx-bg-base: #0a1f14; --cx-bg-surface: #112820; --cx-bg-raised: #1a3a2d; --cx-purple-300: #6ee7b7; --cx-purple-400: #34d399; --cx-purple-500: #10b981; --cx-purple-600: #059669; --cx-purple-700: #047857; --cx-accent: var(--cx-purple-500); --cx-accent-glow: var(--cx-purple-400); --cx-text-primary: #a7f3d0; --cx-border: rgba(16, 185, 129, 0.15); --cx-border-hover: rgba(16, 185, 129, 0.40); --cx-glow-sm: 0 0 8px rgba(16, 185, 129, 0.15); --cx-glow-md: 0 0 20px rgba(16, 185, 129, 0.12); --cx-glow-lg: 0 4px 40px rgba(16, 185, 129, 0.10); --cx-glow-text: 0 0 12px rgba(52, 211, 153, 0.4); } [data-theme="crimson"] { --cx-bg-void: #1a0205; --cx-bg-deep: #1f0308; --cx-bg-base: #200a0f; --cx-bg-surface: #2d1118; --cx-bg-raised: #3d1a22; --cx-purple-300: #fca5a5; --cx-purple-400: #f87171; --cx-purple-500: #ef4444; --cx-purple-600: #dc2626; --cx-purple-700: #b91c1c; --cx-accent: var(--cx-purple-500); --cx-accent-glow: var(--cx-purple-400); --cx-text-primary: #fecaca; --cx-border: rgba(239, 68, 68, 0.15); --cx-border-hover: rgba(239, 68, 68, 0.40); --cx-glow-sm: 0 0 8px rgba(239, 68, 68, 0.15); --cx-glow-md: 0 0 20px rgba(239, 68, 68, 0.12); --cx-glow-lg: 0 4px 40px rgba(239, 68, 68, 0.10); --cx-glow-text: 0 0 12px rgba(248, 113, 113, 0.4); } [data-theme="amber"] { --cx-bg-void: #1a0f02; --cx-bg-deep: #1f1203; --cx-bg-base: #201a0a; --cx-bg-surface: #2d2411; --cx-bg-raised: #3d321a; --cx-purple-300: #fcd34d; --cx-purple-400: #fbbf24; --cx-purple-500: #f59e0b; --cx-purple-600: #d97706; --cx-purple-700: #b45309; --cx-accent: var(--cx-purple-500); --cx-accent-glow: var(--cx-purple-400); --cx-text-primary: #fef3c7; --cx-border: rgba(245, 158, 11, 0.15); --cx-border-hover: rgba(245, 158, 11, 0.40); --cx-glow-sm: 0 0 8px rgba(245, 158, 11, 0.15); --cx-glow-md: 0 0 20px rgba(245, 158, 11, 0.12); --cx-glow-lg: 0 4px 40px rgba(245, 158, 11, 0.10); --cx-glow-text: 0 0 12px rgba(251, 191, 36, 0.4); } /* ─── Fluid Dimension System ─── */ /* All dimensions scale fluidly between min/max viewport */ :root { /* Fluid spacing scale (4px grid, scales 320px→1400px) */ --cx-space-1: clamp(0.2rem, 0.15rem + 0.15vw, 0.25rem); /* 3-4px */ --cx-space-2: clamp(0.375rem, 0.3rem + 0.2vw, 0.5rem); /* 6-8px */ --cx-space-3: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem); /* 8-12px */ --cx-space-4: clamp(0.75rem, 0.6rem + 0.4vw, 1rem); /* 12-16px */ --cx-space-5: clamp(1rem, 0.8rem + 0.5vw, 1.5rem); /* 16-24px */ --cx-space-6: clamp(1.5rem, 1.2rem + 0.7vw, 2rem); /* 24-32px */ --cx-space-7: clamp(2rem, 1.5rem + 1vw, 3rem); /* 32-48px */ --cx-space-8: clamp(3rem, 2rem + 1.5vw, 4rem); /* 48-64px */ /* Fluid component sizes */ --cx-btn-height-sm: clamp(32px, 2rem + 0.5vw, 36px); --cx-btn-height-md: clamp(36px, 2.25rem + 0.5vw, 44px); --cx-btn-height-lg: clamp(44px, 2.75rem + 0.5vw, 52px); --cx-input-height: clamp(36px, 2.25rem + 0.5vw, 44px); --cx-sidebar-width: clamp(180px, 12rem + 2vw, 260px); --cx-card-padding: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem); --cx-panel-padding: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem); /* Fluid border radius */ --cx-radius-fluid-sm: clamp(0.25rem, 0.2rem + 0.1vw, 0.375rem); --cx-radius-fluid-md: clamp(0.375rem, 0.3rem + 0.15vw, 0.5rem); --cx-radius-fluid-lg: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem); --cx-radius-fluid-xl: clamp(0.75rem, 0.6rem + 0.25vw, 1rem); } /* Fluid utility classes */ .cx-fluid-p { padding: var(--cx-card-padding); } .cx-fluid-gap { gap: var(--cx-space-3); } .cx-fluid-gap-lg { gap: var(--cx-space-5); } .cx-fluid-my { margin-block: var(--cx-space-4); } .cx-fluid-my-lg { margin-block: var(--cx-space-6); } /* ─── Base Reset ─── */ *, *::before, *::after { box-sizing: border-box; } /* Global body styles scoped to cx-* apps (add data-cx to to activate) */ [data-cx] { margin: 0; padding: 0; background-color: var(--cx-bg-deep); color: var(--cx-text-primary); font-family: var(--cx-font-mono); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Footer-compatible flex layout (sticky footer pattern) */ min-height: 100vh; display: flex; flex-direction: column; } /* App content grows to push footer down; navbar/footer stay fixed size */ [data-cx] > #root, [data-cx] > main, [data-cx] > .app-content { flex: 1 1 auto; } [data-cx] > .chaoz-footer, [data-cx] > footer { flex-shrink: 0; margin-top: auto; } [data-cx] > script, [data-cx] > style, [data-cx] > link { display: none; } /* ─── Scrollbar ─── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--cx-bg-surface); } ::-webkit-scrollbar-thumb { background: var(--cx-purple-700); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--cx-purple-600); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--cx-purple-700) var(--cx-bg-surface); } /* ─── Selection ─── */ ::selection { background: rgba(168, 85, 247, 0.3); color: var(--cx-purple-100); } /* ─── Focus Ring ─── */ :focus-visible { outline: 2px solid var(--cx-purple-500); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════ UTILITY CLASSES ═══════════════════════════════════════════════════════════════════ */ /* ─── Backgrounds ─── */ .cx-bg-void { background-color: var(--cx-bg-void); } .cx-bg-deep { background-color: var(--cx-bg-deep); } .cx-bg-base { background-color: var(--cx-bg-base); } .cx-bg-surface { background-color: var(--cx-bg-surface); } .cx-bg-raised { background-color: var(--cx-bg-raised); } .cx-bg-overlay { background-color: var(--cx-bg-overlay); } /* ─── Glass / Frosted ─── */ .cx-glass { background: rgba(16, 21, 42, 0.72); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid var(--cx-border); } .cx-glass-heavy { background: rgba(16, 21, 42, 0.88); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--cx-border); } /* ─── Cards ─── */ .cx-card { background: rgba(16, 21, 42, 0.65); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); padding: var(--cx-card-padding); transition: transform 0.2s var(--cx-ease), box-shadow 0.2s var(--cx-ease), border-color 0.2s var(--cx-ease); } .cx-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), var(--cx-glow-sm); border-color: var(--cx-border-hover); } .cx-card-active, .cx-card.active { border-color: var(--cx-border-active); box-shadow: var(--cx-glow-lg); } /* ─── Glow Effects ─── */ .cx-glow { box-shadow: var(--cx-glow-sm); } .cx-glow-md { box-shadow: var(--cx-glow-md); } .cx-glow-lg { box-shadow: var(--cx-glow-lg); } .cx-glow-text { text-shadow: var(--cx-glow-text); } .cx-glow-pulse { animation: cx-pulse-glow 2s ease-in-out infinite; } @keyframes cx-pulse-glow { 0%, 100% { box-shadow: 0 0 8px rgba(168, 85, 247, 0.15); } 50% { box-shadow: 0 0 24px rgba(168, 85, 247, 0.30); } } /* ─── Glow Button Variants ─── */ .cx-glow-purple { background: linear-gradient(135deg, rgba(147, 51, 234, 0.8), rgba(168, 85, 247, 0.6)); color: #f3e8ff; box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), 0 0 30px rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.3); } .cx-glow-purple:hover { box-shadow: 0 0 20px rgba(168, 85, 247, 0.6), 0 0 40px rgba(168, 85, 247, 0.25); } .cx-glow-green { background: linear-gradient(135deg, rgba(16, 185, 129, 0.8), rgba(52, 211, 153, 0.6)); color: #d1fae5; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4), 0 0 30px rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); } .cx-glow-green:hover { box-shadow: 0 0 20px rgba(16, 185, 129, 0.6), 0 0 40px rgba(16, 185, 129, 0.25); } .cx-glow-red { background: linear-gradient(135deg, rgba(220, 38, 38, 0.8), rgba(239, 68, 68, 0.6)); color: #fee2e2; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4), 0 0 30px rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); } .cx-glow-red:hover { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), 0 0 40px rgba(239, 68, 68, 0.25); } .cx-glow-cyan { background: linear-gradient(135deg, rgba(6, 182, 212, 0.8), rgba(34, 211, 238, 0.6)); color: #cffafe; box-shadow: 0 0 15px rgba(6, 182, 212, 0.4), 0 0 30px rgba(6, 182, 212, 0.15); border: 1px solid rgba(6, 182, 212, 0.3); } .cx-glow-cyan:hover { box-shadow: 0 0 20px rgba(6, 182, 212, 0.6), 0 0 40px rgba(6, 182, 212, 0.25); } .cx-glow-blue { background: linear-gradient(135deg, rgba(37, 99, 235, 0.8), rgba(59, 130, 246, 0.6)); color: #dbeafe; box-shadow: 0 0 15px rgba(59, 130, 246, 0.4), 0 0 30px rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); } .cx-glow-blue:hover { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 40px rgba(59, 130, 246, 0.25); } .cx-glow-amber { background: linear-gradient(135deg, rgba(217, 119, 6, 0.8), rgba(245, 158, 11, 0.6)); color: #fef3c7; box-shadow: 0 0 15px rgba(245, 158, 11, 0.4), 0 0 30px rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); } .cx-glow-amber:hover { box-shadow: 0 0 20px rgba(245, 158, 11, 0.6), 0 0 40px rgba(245, 158, 11, 0.25); } /* Neon text color overrides for badges */ .cx-neon-blue { text-shadow: 0 0 7px #3b82f6, 0 0 10px #3b82f6, 0 0 21px #3b82f6, 0 0 42px #2563eb, 0 0 82px #2563eb; color: #dbeafe; } /* ─── Borders ─── */ .cx-border { border: 1px solid var(--cx-border); } .cx-border-hover { border: 1px solid var(--cx-border-hover); } .cx-divider { height: 1px; background: var(--cx-border); } .cx-divider-v { width: 1px; background: var(--cx-border); align-self: stretch; } /* ─── Text ─── */ .cx-text-primary { color: var(--cx-text-primary); } .cx-text-secondary { color: var(--cx-text-secondary); } .cx-text-muted { color: var(--cx-text-muted); } .cx-text-accent { color: var(--cx-purple-400); } .cx-text-success { color: var(--cx-success); } .cx-text-warning { color: var(--cx-warning); } .cx-text-danger { color: var(--cx-danger); } /* ─── Gradient Text ─── */ .cx-gradient-text { background: linear-gradient(135deg, var(--cx-purple-300), var(--cx-purple-500), var(--cx-purple-300)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: cx-gradient-shift 4s linear infinite; } @keyframes cx-gradient-shift { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } /* ─── Animated Gradient Border ─── */ .cx-gradient-border { position: relative; border: 1px solid transparent; background-clip: padding-box; } .cx-gradient-border::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, var(--cx-purple-700), var(--cx-purple-500), var(--cx-purple-700)); background-size: 200% 200%; animation: cx-border-rotate 3s linear infinite; z-index: -1; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; padding: 1px; } @keyframes cx-border-rotate { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* ═══════════════════════════════════════════════════════════════════ COMPONENT CLASSES ═══════════════════════════════════════════════════════════════════ */ /* ─── Buttons ─── */ .cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: var(--cx-radius-md); border: 0 solid transparent; cursor: pointer; transition: all 0.15s var(--cx-ease); font-family: inherit; line-height: 1; min-height: var(--cx-btn-height-md); } .cx-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .cx-btn-primary { background: var(--cx-accent); color: white; } .cx-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--cx-accent) 85%, white); box-shadow: var(--cx-glow-sm); } .cx-btn-secondary { background: var(--cx-bg-raised); color: var(--cx-text-secondary); } .cx-btn-secondary:hover:not(:disabled) { background: #374151; color: var(--cx-text-primary); } .cx-btn-ghost { background: transparent; color: var(--cx-text-muted); } .cx-btn-ghost:hover:not(:disabled) { background: var(--cx-bg-surface); color: var(--cx-text-primary); } .cx-btn-outline { background: transparent; color: var(--cx-purple-300); border: 1px solid var(--cx-border); } .cx-btn-outline:hover:not(:disabled) { border-color: var(--cx-border-active); box-shadow: var(--cx-glow-sm); } .cx-btn-danger { background: rgba(248, 113, 113, 0.15); color: var(--cx-danger); border: 1px solid rgba(248, 113, 113, 0.2); } .cx-btn-danger:hover:not(:disabled) { background: rgba(248, 113, 113, 0.25); } .cx-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .cx-btn:active { transform: translateY(0); box-shadow: none; } /* Button Sizes */ .cx-btn-xs { padding: 0.25rem 0.5rem; font-size: 0.625rem; } .cx-btn-sm { padding: 0.375rem 0.625rem; font-size: 0.6875rem; } .cx-btn-md { padding: 0.5rem 1rem; font-size: 0.8125rem; } .cx-btn-lg { padding: 0.625rem 1.25rem; font-size: 0.875rem; } /* ─── Inputs ─── */ .cx-input { background: var(--cx-bg-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-md); color: var(--cx-purple-100); padding: 0.375rem 0.75rem; font-size: 0.75rem; font-family: inherit; transition: border-color var(--cx-duration) var(--cx-ease); width: 100%; min-height: var(--cx-input-height); } .cx-input::placeholder { color: var(--cx-text-ghost); } .cx-input:focus, .cx-select:focus, .cx-textarea:focus { border-color: var(--cx-purple-500); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15), var(--cx-glow-sm); outline: none; } /* ─── Badges ─── */ .cx-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; font-size: 0.625rem; font-weight: 600; border-radius: 0.25rem; border: 1px solid; } .cx-badge-purple { background: rgba(168,85,247,0.15); color: var(--cx-purple-300); border-color: rgba(168,85,247,0.2); } .cx-badge-blue { background: rgba(96,165,250,0.15); color: #93bbfd; border-color: rgba(96,165,250,0.2); } .cx-badge-teal { background: rgba(45,212,191,0.15); color: #5eead4; border-color: rgba(45,212,191,0.2); } .cx-badge-amber { background: rgba(251,191,36,0.15); color: #fcd34d; border-color: rgba(251,191,36,0.2); } .cx-badge-red { background: rgba(248,113,113,0.15); color: #fca5a5; border-color: rgba(248,113,113,0.2); } .cx-badge-green { background: rgba(52,211,153,0.15); color: #6ee7b7; border-color: rgba(52,211,153,0.2); } /* ─── Pill (Toggle / Filter) ─── */ .cx-pill { padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.6875rem; cursor: pointer; transition: all var(--cx-duration) var(--cx-ease); border: 1px solid transparent; background: var(--cx-bg-surface); color: var(--cx-text-muted); } .cx-pill:hover { color: var(--cx-text-primary); } .cx-pill.active, .cx-pill-active { background: var(--cx-purple-600); color: white; border-color: var(--cx-purple-500); } /* ─── Status Dots ─── */ .cx-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; } .cx-dot-synced { background: var(--cx-purple-400); } .cx-dot-connected { background: var(--cx-success); } .cx-dot-error { background: var(--cx-danger); } .cx-dot-warning { background: var(--cx-warning); } .cx-dot-pulse { animation: cx-dot-pulse 2s ease-in-out infinite; } @keyframes cx-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.3); } } .cx-dot-live { position: relative; } .cx-dot-live::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: inherit; opacity: 0; animation: cx-dot-ring 2s ease-out infinite; } @keyframes cx-dot-ring { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(2); opacity: 0; } } /* ─── Stat Blocks ─── */ .cx-stat { display: flex; align-items: center; gap: 0.375rem; } .cx-stat-label { color: var(--cx-text-muted); font-size: 0.6875rem; } .cx-stat-value { color: var(--cx-purple-300); font-size: 0.75rem; font-weight: 600; } /* ─── Code Blocks ─── */ .cx-code { background: var(--cx-bg-void); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-md); padding: 0.75rem 1rem; font-family: var(--cx-font-mono); font-size: 0.75rem; color: var(--cx-purple-200); overflow-x: auto; white-space: pre; } .cx-code-inline { background: rgba(168, 85, 247, 0.1); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-family: var(--cx-font-mono); font-size: 0.8em; color: var(--cx-purple-300); } /* ─── Tables ─── */ .cx-table { width: 100%; border-collapse: collapse; } .cx-table th { text-align: left; padding: 0.5rem 0.75rem; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cx-text-muted); border-bottom: 1px solid rgba(55, 65, 81, 0.5); font-weight: 500; } .cx-table td { padding: 0.5rem 0.75rem; font-size: 0.75rem; border-bottom: 1px solid rgba(31, 41, 55, 0.3); } .cx-table tr:hover td { background: rgba(168, 85, 247, 0.03); } /* ═══════════════════════════════════════════════════════════════════ CX-NAVBAR — Platform top navigation bar HTML-first: renders from static markup, hydrated by cx-navbar.js ═══════════════════════════════════════════════════════════════════ */ .cx-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; height: 56px; background: rgba(10, 10, 20, 0.98); /* backdrop-filter removed — creates containing block that clips dropdown menus */ border-bottom: 1px solid var(--cx-border); font-family: var(--cx-font-sans); transition: transform 0.25s var(--cx-ease); } .cx-navbar.cx-navbar-hidden { transform: translateY(-100%); } [data-theme="light"] .cx-navbar { background: rgba(255, 255, 255, 0.92); border-bottom-color: rgba(0,0,0,0.08); } .cx-navbar-inner { max-width: 1440px; margin: 0 auto; height: 100%; display: flex; align-items: center; padding: 0 1rem; gap: 0.25rem; } /* Brand */ .cx-navbar-brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--cx-text-primary); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; flex-shrink: 0; margin-right: 0.75rem; } .cx-navbar-brand img { width: 28px; height: 28px; border-radius: 6px; } .cx-navbar-brand:hover { color: var(--cx-purple-300); } /* Nav links area — horizontal scroll on mobile */ .cx-navbar-nav { display: flex; align-items: center; gap: 0.125rem; flex: 1; min-width: 0; overflow: visible; } .cx-navbar-nav::-webkit-scrollbar { display: none; } /* Individual nav link */ .cx-navbar-link { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; font-size: 0.8125rem; font-weight: 500; color: var(--cx-text-muted); text-decoration: none; border-radius: 6px; white-space: nowrap; transition: color 0.15s, background 0.15s; cursor: pointer; border: none; background: none; } .cx-navbar-link:hover { color: var(--cx-text-primary); background: rgba(168, 85, 247, 0.08); } .cx-navbar-link.active { color: var(--cx-purple-300); background: rgba(168, 85, 247, 0.12); } .cx-navbar-link i { font-size: 1rem; } /* CTA button (App Builder) */ .cx-navbar-cta { background: linear-gradient(135deg, var(--cx-purple-600), var(--cx-blue-600)); color: #fff !important; padding: 0.375rem 0.75rem; border-radius: 8px; font-weight: 600; } .cx-navbar-cta:hover { background: linear-gradient(135deg, var(--cx-purple-500), var(--cx-blue-500)); box-shadow: 0 0 16px rgba(168, 85, 247, 0.3); } /* Right actions group */ .cx-navbar-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; margin-left: auto; } /* Action button (theme, search, notif, msg) */ .cx-navbar-action { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: none; background: rgba(139, 92, 246, 0.08); color: rgba(226, 232, 240, 0.85); cursor: pointer; position: relative; transition: color 0.15s, background 0.15s; font-size: 1.1rem; } .cx-navbar-action:hover { color: #fff; background: rgba(139, 92, 246, 0.2); } /* Notification/message dot badge */ .cx-navbar-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-red-500); border: 2px solid rgba(10, 10, 20, 0.85); display: none; } .cx-navbar-dot.active { display: block; } [data-theme="light"] .cx-navbar-dot { border-color: rgba(255, 255, 255, 0.92); } /* User button */ .cx-navbar-user { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem; border-radius: 8px; border: none; background: none; color: var(--cx-text-secondary); cursor: pointer; transition: background 0.15s; font-size: 0.8125rem; font-weight: 500; } .cx-navbar-user:hover { background: rgba(168, 85, 247, 0.08); } .cx-navbar-user img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cx-border); } /* Dropdown (extends existing cx-dropdown) */ .cx-navbar .cx-dropdown { position: relative; overflow: visible; } .cx-navbar .cx-dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px; background: #1e2340; border: 1px solid rgba(139, 92, 246, 0.35); border-radius: 12px; padding: 0.5rem; box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(139,92,246,0.1); display: none; z-index: 10001; } .cx-navbar .cx-dropdown.open .cx-dropdown-menu { display: block; } .cx-navbar .cx-dropdown.open .cx-dropdown-arrow { transform: rotate(180deg); } .cx-navbar .cx-dropdown-menu.cx-dropdown-end { left: auto; right: 0; } /* Dropdown items with app color accent */ .cx-navbar .cx-dropdown-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 8px; color: var(--cx-text-secondary); text-decoration: none; font-size: 0.8125rem; transition: background 0.12s, color 0.12s; } .cx-navbar .cx-dropdown-item:hover { background: rgba(168, 85, 247, 0.08); color: var(--cx-text-primary); } .cx-navbar .cx-dropdown-item i { font-size: 1.125rem; width: 1.5rem; text-align: center; color: var(--app-accent, var(--cx-purple-400)); } .cx-navbar .cx-dropdown-desc { font-size: 0.6875rem; color: var(--cx-text-muted); line-height: 1.3; } .cx-navbar .cx-dropdown-title { font-weight: 500; color: var(--cx-text-primary); } .cx-navbar .cx-dropdown-text { display: flex; flex-direction: column; gap: 1px; } /* Arrow indicator on dropdown toggles */ .cx-navbar .cx-dropdown-toggle { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; font-size: 0.8125rem; font-weight: 500; color: var(--cx-text-muted); background: none; border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: color 0.15s, background 0.15s; } .cx-navbar .cx-dropdown-toggle:hover { color: var(--cx-text-primary); background: rgba(168, 85, 247, 0.08); } .cx-navbar .cx-dropdown-arrow { font-size: 0.625rem; transition: transform 0.2s; } .cx-navbar .cx-dropdown.open .cx-dropdown-arrow { transform: rotate(180deg); } /* Mobile hamburger — only visible on small screens */ .cx-navbar-hamburger { display: none; } /* Body offset for fixed navbar */ body[data-cx] { padding-top: 56px; } /* ─── Mobile responsive ─── */ @media (max-width: 768px) { .cx-navbar-inner { padding: 0 0.75rem; } .cx-navbar-brand span { display: none; } .cx-navbar-nav { display: none; } .cx-navbar-nav.mobile-open { display: flex; flex-direction: column; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: var(--cx-bg-base, #0a0e1a); padding: 1rem; gap: 0.25rem; overflow-y: auto; z-index: 999; animation: cx-slide-down 0.2s ease-out; } .cx-navbar-hamburger { display: flex; } .cx-navbar .cx-dropdown-menu { position: static; box-shadow: none; border: none; background: rgba(168, 85, 247, 0.04); border-radius: 8px; margin-top: 0.25rem; } .cx-navbar-nav.mobile-open .cx-dropdown.open .cx-dropdown-menu { display: block; } .cx-navbar-user span { display: none; } } @keyframes cx-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ─── Bottom nav variant ─── */ body[data-bottom-nav] .cx-navbar { top: auto; bottom: 0; border-top: 1px solid var(--cx-border); border-bottom: none; } body[data-bottom-nav] { padding-top: 0; padding-bottom: 56px; } /* ═══════════════════════════════════════════════════════════════════ LAYOUT CLASSES ═══════════════════════════════════════════════════════════════════ */ .cx-page { min-height: 100vh; display: flex; flex-direction: column; position: relative; } .cx-header { position: relative; z-index: 10; background: rgba(3, 7, 18, 0.90); border-bottom: 1px solid var(--cx-border); padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between; } .cx-sidebar { width: var(--cx-sidebar-width); background: rgba(10, 15, 26, 0.95); border-right: 1px solid var(--cx-border); padding: 0.75rem 0; overflow-y: auto; } .cx-sidebar-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.75rem; color: var(--cx-text-muted); cursor: pointer; transition: all 0.15s var(--cx-ease); position: relative; } .cx-sidebar-item:hover { background: rgba(168, 85, 247, 0.08); color: var(--cx-purple-300); padding-left: calc(1rem + 3px); } .cx-sidebar-item.active { background: rgba(168, 85, 247, 0.12); color: var(--cx-purple-300); } .cx-sidebar-item.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--cx-purple-500); border-radius: 0 3px 3px 0; } /* ─── Responsive Sidebar System ─── */ .cx-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 40; opacity: 0; transition: opacity 0.3s ease; } .cx-sidebar-overlay.active { opacity: 1; } .cx-sidebar-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--cx-radius-md); background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); color: var(--cx-purple-400); cursor: pointer; transition: all 0.2s ease; font-size: 1.25rem; z-index: 50; } .cx-sidebar-toggle:hover { background: rgba(168, 85, 247, 0.2); } @media (max-width: 768px) { .cx-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 45; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3); } .cx-sidebar.open { transform: translateX(0); } .cx-sidebar-overlay { display: block; } .cx-sidebar-toggle { display: flex; } } @media (min-width: 769px) and (max-width: 1024px) { .cx-sidebar { width: 200px; } } .cx-content { flex: 1; padding: 1rem; position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════════════════════════════════ */ .cx-fade-in { animation: cx-fade-in var(--cx-duration-slow) var(--cx-ease) forwards; } @keyframes cx-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .cx-slide-up { animation: cx-slide-up 0.4s var(--cx-spring) forwards; } @keyframes cx-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .cx-scale-in { animation: cx-scale-in 0.25s var(--cx-spring) forwards; } @keyframes cx-scale-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Stagger children — add cx-stagger to parent, cx-stagger-item to children */ .cx-stagger > .cx-stagger-item { opacity: 0; animation: cx-fade-in 0.3s var(--cx-ease) forwards; } .cx-stagger > .cx-stagger-item:nth-child(1) { animation-delay: 0.03s; } .cx-stagger > .cx-stagger-item:nth-child(2) { animation-delay: 0.06s; } .cx-stagger > .cx-stagger-item:nth-child(3) { animation-delay: 0.09s; } .cx-stagger > .cx-stagger-item:nth-child(4) { animation-delay: 0.12s; } .cx-stagger > .cx-stagger-item:nth-child(5) { animation-delay: 0.15s; } .cx-stagger > .cx-stagger-item:nth-child(6) { animation-delay: 0.18s; } .cx-stagger > .cx-stagger-item:nth-child(7) { animation-delay: 0.21s; } .cx-stagger > .cx-stagger-item:nth-child(8) { animation-delay: 0.24s; } .cx-stagger > .cx-stagger-item:nth-child(9) { animation-delay: 0.27s; } .cx-stagger > .cx-stagger-item:nth-child(10) { animation-delay: 0.30s; } .cx-stagger > .cx-stagger-item:nth-child(n+11) { animation-delay: 0.33s; } /* ─── Scanline Overlay ─── */ .cx-scanlines::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px ); z-index: 100; } /* ─── Noise Grain ─── */ .cx-noise::before { content: ''; position: fixed; inset: -50%; width: 200%; height: 200%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E"); pointer-events: none; z-index: 99; } /* ═══════════════════════════════════════════════════════════════════ Z-TEMPLATE v2.0 EXTENSIONS ═══════════════════════════════════════════════════════════════════ */ /* ─── Responsive Grid Utilities ─── */ .cx-grid { display: grid; gap: 1rem; } .cx-grid-1 { grid-template-columns: repeat(1, 1fr); } .cx-grid-2 { grid-template-columns: repeat(2, 1fr); } .cx-grid-3 { grid-template-columns: repeat(3, 1fr); } .cx-grid-4 { grid-template-columns: repeat(4, 1fr); } .cx-grid-auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } @media (max-width: 768px) { .cx-grid-2, .cx-grid-3, .cx-grid-4 { grid-template-columns: 1fr; } } @media (min-width: 769px) and (max-width: 1024px) { .cx-grid-3, .cx-grid-4 { grid-template-columns: repeat(2, 1fr); } } /* ─── Responsive Grid Variants ─── */ .cx-grid-responsive-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .cx-grid-responsive-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .cx-grid-responsive-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 1024px) { .cx-grid-responsive-4 { grid-template-columns: repeat(2, 1fr); } .cx-grid-responsive-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cx-grid-responsive-4 { grid-template-columns: 1fr; } .cx-grid-responsive-3 { grid-template-columns: 1fr; } .cx-grid-responsive-2 { grid-template-columns: 1fr; } } /* ─── Flex Utilities ─── */ .cx-flex { display: flex; align-items: center; gap: 0.5rem; } .cx-flex-between { display: flex; align-items: center; justify-content: space-between; } .cx-flex-col { display: flex; flex-direction: column; gap: 0.5rem; } .cx-flex-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ─── Card Variants ─── */ .cx-card-hover { transition: transform var(--cx-duration) var(--cx-ease), border-color var(--cx-duration) var(--cx-ease), box-shadow var(--cx-duration) var(--cx-ease); } .cx-card-hover:hover { transform: translateY(-1px); border-color: var(--cx-border-hover); box-shadow: var(--cx-glow-md); } .cx-card-interactive { cursor: pointer; user-select: none; } .cx-card-interactive:active { transform: scale(0.98); } .cx-card-success { border-color: rgba(52, 211, 153, 0.3); } .cx-card-warning { border-color: rgba(251, 191, 36, 0.3); } .cx-card-info { border-color: rgba(96, 165, 250, 0.3); } /* ─── Stat Card ─── */ .cx-stat-card { background: rgba(17, 24, 39, 0.70); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); padding: var(--cx-card-padding, 0.75rem); display: flex; flex-direction: column; gap: 0.5rem; transition: transform 0.2s var(--cx-ease), box-shadow 0.2s var(--cx-ease), border-color 0.2s var(--cx-ease); } .cx-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), var(--cx-glow-sm); border-color: var(--cx-border-hover); } .cx-stat-card-icon { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--cx-radius-md); font-size: 1rem; } .cx-stat-card-value { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--cx-purple-200); } .cx-stat-card-label { font-size: 0.6875rem; color: var(--cx-text-muted); } /* ─── Quick Action ─── */ .cx-quick-action { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: rgba(17, 24, 39, 0.60); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); cursor: pointer; transition: all 0.2s var(--cx-ease); } .cx-quick-action:hover { border-color: var(--cx-border-hover); background: rgba(168, 85, 247, 0.06); box-shadow: var(--cx-glow-sm); transform: translateX(4px); } .cx-quick-action:active { transform: translateX(2px); } /* ─── Alert / Banner ─── */ .cx-alert { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--cx-radius-md); border: 1px solid; font-size: 0.75rem; } .cx-alert-info { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.2); color: #93bbfd; } .cx-alert-success { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.2); color: #6ee7b7; } .cx-alert-warning { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.2); color: #fcd34d; } .cx-alert-danger { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.2); color: #fca5a5; } /* ─── Terminal ─── */ .cx-terminal { background: var(--cx-bg-void); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); font-family: var(--cx-font-mono); font-size: 0.6875rem; overflow: hidden; } .cx-terminal-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(17, 24, 39, 0.80); border-bottom: 1px solid var(--cx-border); } .cx-terminal-dot { width: 6px; height: 6px; border-radius: 50%; } .cx-terminal-body { padding: 0.75rem; max-height: 300px; overflow-y: auto; line-height: 1.7; } .cx-terminal-line { color: var(--cx-purple-200); } .cx-terminal-prompt { color: var(--cx-success); } .cx-terminal-error { color: var(--cx-danger); } .cx-terminal-dim { color: var(--cx-text-muted); } /* ─── Accordion ─── */ .cx-accordion-item { border-bottom: 1px solid rgba(55, 65, 81, 0.3); } .cx-accordion-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.625rem 0; font-size: 0.75rem; font-weight: 500; color: var(--cx-text-primary); background: none; border: none; cursor: pointer; transition: color var(--cx-duration) var(--cx-ease); } .cx-accordion-trigger:hover { color: var(--cx-purple-300); } .cx-accordion-content { padding: 0 0 0.625rem; font-size: 0.6875rem; color: var(--cx-text-secondary); line-height: 1.7; } /* ─── Avatar ─── */ .cx-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; text-transform: uppercase; background: linear-gradient(135deg, var(--cx-purple-600), var(--cx-purple-800)); color: white; border: 2px solid rgba(168, 85, 247, 0.3); overflow: hidden; position: relative; } .cx-avatar-xs { width: 1.5rem; height: 1.5rem; font-size: 0.5rem; } .cx-avatar-sm { width: 2rem; height: 2rem; font-size: 0.625rem; } .cx-avatar-md { width: 2.5rem; height: 2.5rem; font-size: 0.75rem; } .cx-avatar-lg { width: 3rem; height: 3rem; font-size: 0.875rem; } .cx-avatar img { width: 100%; height: 100%; object-fit: cover; } .cx-avatar-status { position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--cx-bg-deep); } /* ─── Dropdown ─── */ .cx-dropdown { position: absolute; z-index: 30; min-width: 160px; background: var(--cx-bg-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); padding: 0.25rem 0; overflow: hidden; } .cx-dropdown-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.375rem 0.75rem; font-size: 0.6875rem; color: var(--cx-text-secondary); background: none; border: none; cursor: pointer; transition: all 80ms; } .cx-dropdown-item:hover { background: rgba(168, 85, 247, 0.08); color: var(--cx-text-primary); } .cx-dropdown-divider { height: 1px; background: var(--cx-border); margin: 0.25rem 0; } /* ─── Command Palette (Cmd+K) ─── */ .cx-cmd-palette { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; } .cx-cmd-palette-inner { width: 100%; max-width: 480px; background: var(--cx-bg-surface); border: 1px solid var(--cx-border-hover); border-radius: var(--cx-radius-xl); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(168, 85, 247, 0.08); overflow: hidden; } .cx-cmd-input { width: 100%; padding: 0.75rem 1rem; background: transparent; border: none; border-bottom: 1px solid var(--cx-border); font-size: 0.8125rem; font-family: var(--cx-font-mono); color: var(--cx-text-primary); outline: none; } .cx-cmd-input::placeholder { color: var(--cx-text-ghost); } .cx-cmd-list { max-height: 320px; overflow-y: auto; padding: 0.25rem; } .cx-cmd-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--cx-radius-md); cursor: pointer; transition: background 60ms; } .cx-cmd-item:hover, .cx-cmd-item.active { background: rgba(168, 85, 247, 0.1); } .cx-cmd-item-label { flex: 1; font-size: 0.75rem; color: var(--cx-text-primary); } .cx-cmd-item-shortcut { font-size: 0.625rem; color: var(--cx-text-ghost); font-family: var(--cx-font-mono); } /* ─── DataGrid ─── */ .cx-datagrid { width: 100%; background: rgba(17, 24, 39, 0.40); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); overflow: hidden; } .cx-datagrid-header { display: flex; gap: 0; background: rgba(17, 24, 39, 0.80); border-bottom: 1px solid rgba(55, 65, 81, 0.5); } .cx-datagrid-cell { padding: 0.5rem 0.75rem; font-size: 0.75rem; } .cx-datagrid-header .cx-datagrid-cell { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cx-text-muted); font-weight: 500; user-select: none; } .cx-datagrid-row { display: flex; gap: 0; border-bottom: 1px solid rgba(31, 41, 55, 0.3); transition: background 80ms; } .cx-datagrid-row:hover { background: rgba(168, 85, 247, 0.03); } .cx-datagrid-row:last-child { border-bottom: none; } /* ─── Additional Animations ─── */ .cx-bounce { animation: cx-bounce 0.4s var(--cx-spring); } @keyframes cx-bounce { 0% { transform: scale(0.95); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } } .cx-shake { animation: cx-shake 0.3s ease-in-out; } @keyframes cx-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .cx-float { animation: cx-float 3s ease-in-out infinite; } @keyframes cx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .cx-slide-in-right { animation: cx-slide-in-right 0.3s var(--cx-ease) forwards; } @keyframes cx-slide-in-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .cx-rotate-in { animation: cx-rotate-in 0.4s var(--cx-spring) forwards; } @keyframes cx-rotate-in { from { opacity: 0; transform: rotate(-10deg) scale(0.9); } to { opacity: 1; transform: rotate(0) scale(1); } } /* ─── Focus & Form States ─── */ .cx-input-error { border-color: rgba(248, 113, 113, 0.5) !important; box-shadow: 0 0 8px rgba(248, 113, 113, 0.1); } .cx-input-success { border-color: rgba(52, 211, 153, 0.5) !important; box-shadow: 0 0 8px rgba(52, 211, 153, 0.1); } .cx-input-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ─── Backdrop ─── */ .cx-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 40; } /* ─── Responsive Hide/Show ─── */ @media (max-width: 768px) { .cx-hide-mobile { display: none !important; } } @media (min-width: 769px) { .cx-hide-desktop { display: none !important; } } /* ─── Print ─── */ @media print { .cx-no-print { display: none !important; } body { background: white; color: black; } .cx-card { border: 1px solid #ddd; box-shadow: none; background: white; } } /* ═══════════════════════════════════════════════════════════════════ PHASE 6 — MEGA CSS EXPANSION Gradients · Patterns · Shadows · Container Queries · Text FX Aspect Ratios · Advanced Animations · Responsive Helpers ═══════════════════════════════════════════════════════════════════ */ /* ─── Gradient Presets ─── */ .cx-gradient-purple { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%); } .cx-gradient-cyber { background: linear-gradient(135deg, #06b6d4 0%, #a855f7 50%, #ec4899 100%); } .cx-gradient-sunset { background: linear-gradient(135deg, #f97316 0%, #ef4444 50%, #ec4899 100%); } .cx-gradient-ocean { background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #8b5cf6 100%); } .cx-gradient-emerald { background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%); } .cx-gradient-gold { background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%); } .cx-gradient-midnight{ background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%); } .cx-gradient-aurora { background: linear-gradient(135deg, #10b981 0%, #06b6d4 25%, #8b5cf6 50%, #ec4899 75%, #f97316 100%); } .cx-gradient-mesh { background: radial-gradient(at 40% 20%, #7c3aed 0px, transparent 50%), radial-gradient(at 80% 0%, #06b6d4 0px, transparent 50%), radial-gradient(at 0% 50%, #ec4899 0px, transparent 50%), radial-gradient(at 80% 50%, #10b981 0px, transparent 50%), radial-gradient(at 0% 100%, #f59e0b 0px, transparent 50%); background-color: #0a0a12; } /* Text gradient helpers */ .cx-text-gradient-purple { background: linear-gradient(135deg, #a855f7, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cx-text-gradient-cyber { background: linear-gradient(135deg, #06b6d4, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cx-text-gradient-gold { background: linear-gradient(135deg, #f59e0b, #fcd34d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ─── Background Patterns ─── */ .cx-pattern-dots { background-image: radial-gradient(circle, rgba(168,85,247,0.15) 1px, transparent 1px); background-size: 20px 20px; } .cx-pattern-grid { background-image: linear-gradient(rgba(168,85,247,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(168,85,247,0.06) 1px, transparent 1px); background-size: 24px 24px; } .cx-pattern-diagonal { background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(168,85,247,0.04) 10px, rgba(168,85,247,0.04) 11px); } .cx-pattern-hex { background-color: #0a0a12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%237c3aed' fill-opacity='0.06'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .cx-pattern-circuit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h8v2H0zM12 20h16v2H12zM32 20h8v2h-8zM20 0v8h2V0zM20 12v16h2V12zM20 32v8h2v-8z' fill='%237c3aed' fill-opacity='.06'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%237c3aed' fill-opacity='.1'/%3E%3C/svg%3E"); } /* ─── Shadow Presets ─── */ .cx-shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.3); } .cx-shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2); } .cx-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.2); } .cx-shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.2); } .cx-shadow-glow { box-shadow: 0 0 15px rgba(168,85,247,0.3), 0 0 45px rgba(168,85,247,0.1); } .cx-shadow-glow-cyan { box-shadow: 0 0 15px rgba(6,182,212,0.3), 0 0 45px rgba(6,182,212,0.1); } .cx-shadow-glow-green { box-shadow: 0 0 15px rgba(16,185,129,0.3), 0 0 45px rgba(16,185,129,0.1); } .cx-shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.3); } .cx-shadow-ring { box-shadow: 0 0 0 2px rgba(168,85,247,0.3); } .cx-shadow-ring-lg { box-shadow: 0 0 0 3px rgba(168,85,247,0.2), 0 0 15px rgba(168,85,247,0.1); } /* ─── Aspect Ratio Utilities ─── */ .cx-aspect-square { aspect-ratio: 1 / 1; } .cx-aspect-video { aspect-ratio: 16 / 9; } .cx-aspect-photo { aspect-ratio: 4 / 3; } .cx-aspect-portrait{ aspect-ratio: 3 / 4; } .cx-aspect-cinema { aspect-ratio: 21 / 9; } .cx-aspect-golden { aspect-ratio: 1.618 / 1; } /* ─── Container Queries ─── */ .cx-container { container-type: inline-size; } .cx-container-name { container-type: inline-size; container-name: var(--cx-container-name, section); } @container (min-width: 400px) { .cx-cq-2col { grid-template-columns: repeat(2, 1fr); } } @container (min-width: 600px) { .cx-cq-3col { grid-template-columns: repeat(3, 1fr); } } @container (min-width: 800px) { .cx-cq-4col { grid-template-columns: repeat(4, 1fr); } } @container (max-width: 399px) { .cx-cq-stack { display: flex; flex-direction: column; } } /* ─── Container Query Components ─── */ @container (max-width: 300px) { .cx-card { padding: 0.5rem; } .cx-card .cx-card-header { flex-direction: column; gap: 0.25rem; } .cx-stat-card { padding: 0.5rem; } .cx-stat-card .text-2xl, .cx-stat-card .text-xl { font-size: 1.25rem; } .cx-btn { width: 100%; justify-content: center; } } @container (max-width: 500px) { .cx-panel-header { flex-wrap: wrap; } .cx-toolbar { flex-wrap: wrap; gap: 0.25rem; } .cx-btn-group { flex-wrap: wrap; } } @container (min-width: 600px) { .cx-cq-side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } } /* ─── Text Effects ─── */ .cx-text-glow { text-shadow: 0 0 10px rgba(168,85,247,0.5), 0 0 30px rgba(168,85,247,0.2); } .cx-text-glow-cyan { text-shadow: 0 0 10px rgba(6,182,212,0.5), 0 0 30px rgba(6,182,212,0.2); } .cx-text-stroke { -webkit-text-stroke: 1px rgba(168,85,247,0.5); color: transparent; } .cx-text-stroke-2 { -webkit-text-stroke: 2px rgba(168,85,247,0.5); color: transparent; } .cx-text-balance { text-wrap: balance; } .cx-text-pretty { text-wrap: pretty; } .cx-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cx-truncate-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cx-text-mono { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; } .cx-text-display { font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; } .cx-text-caption { font-size: 0.625rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cx-gray-400); } /* ─── Extended Animations ─── */ @keyframes cx-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes cx-bounce-in { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } } @keyframes cx-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } } @keyframes cx-wobble { 0% { transform: rotate(0deg); } 15% { transform: rotate(-5deg); } 30% { transform: rotate(3deg); } 45% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } 75% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @keyframes cx-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } } @keyframes cx-typing { from { width: 0; } to { width: 100%; } } @keyframes cx-blink-caret { from, to { border-color: transparent; } 50% { border-color: var(--cx-purple-400); } } @keyframes cx-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes cx-slide-down { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes cx-slide-left { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes cx-slide-right { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes cx-scale-in { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes cx-flip { from { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } to { transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes cx-morph { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } } @keyframes cx-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes cx-counter-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } .cx-animate-float { animation: cx-float 3s ease-in-out infinite; } .cx-animate-bounce-in { animation: cx-bounce-in 0.6s ease-out; } .cx-animate-shake { animation: cx-shake 0.5s ease-in-out; } .cx-animate-wobble { animation: cx-wobble 1s ease-in-out; } .cx-animate-heartbeat { animation: cx-heartbeat 1.5s ease-in-out infinite; } .cx-animate-slide-up { animation: cx-slide-up 0.4s ease-out; } .cx-animate-slide-down { animation: cx-slide-down 0.4s ease-out; } .cx-animate-slide-left { animation: cx-slide-left 0.4s ease-out; } .cx-animate-slide-right { animation: cx-slide-right 0.4s ease-out; } .cx-animate-scale-in { animation: cx-scale-in 0.3s ease-out; } .cx-animate-flip { animation: cx-flip 0.8s ease-out; } .cx-animate-morph { animation: cx-morph 8s ease-in-out infinite; } .cx-animate-gradient { background-size: 200% 200%; animation: cx-gradient-shift 3s ease infinite; } .cx-animate-typing { overflow: hidden; white-space: nowrap; border-right: 2px solid; animation: cx-typing 3.5s steps(40, end), cx-blink-caret 0.75s step-end infinite; } /* Staggered animation delays */ .cx-delay-1 { animation-delay: 50ms; } .cx-delay-2 { animation-delay: 100ms; } .cx-delay-3 { animation-delay: 150ms; } .cx-delay-4 { animation-delay: 200ms; } .cx-delay-5 { animation-delay: 250ms; } .cx-delay-6 { animation-delay: 300ms; } .cx-delay-7 { animation-delay: 350ms; } .cx-delay-8 { animation-delay: 400ms; } /* ─── Scrollbar Styling ─── */ .cx-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .cx-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 3px; } .cx-scrollbar::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.2); border-radius: 3px; } .cx-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,0.4); } .cx-scrollbar-hidden::-webkit-scrollbar { display: none; } .cx-scrollbar-hidden { -ms-overflow-style: none; scrollbar-width: none; } /* ─── Glass / Frosted Effects ─── */ .cx-glass { background: rgba(16,21,42,0.60); backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(168,85,247,0.10); } .cx-glass-light { background: rgba(26,31,56,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(168,85,247,0.06); } .cx-glass-dark { background: rgba(2,6,23,0.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ─── Border Styles ─── */ .cx-border-gradient { border: 1px solid transparent; background-origin: border-box; background-clip: padding-box, border-box; background-image: linear-gradient(var(--cx-bg-base), var(--cx-bg-base)), linear-gradient(135deg, #7c3aed, #06b6d4); } .cx-border-glow { position: relative; border: 1px solid rgba(168,85,247,0.15); } .cx-border-glow::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, rgba(168,85,247,0.1), transparent, rgba(6,182,212,0.1)); z-index: -1; filter: blur(8px); } /* ─── Spacing Scale ─── */ .cx-gap-xs { gap: 0.25rem; } .cx-gap-sm { gap: 0.5rem; } .cx-gap-md { gap: 1rem; } .cx-gap-lg { gap: 1.5rem; } .cx-gap-xl { gap: 2rem; } .cx-gap-2xl { gap: 3rem; } .cx-space-xs > * + * { margin-top: 0.25rem; } .cx-space-sm > * + * { margin-top: 0.5rem; } .cx-space-md > * + * { margin-top: 1rem; } .cx-space-lg > * + * { margin-top: 1.5rem; } .cx-space-xl > * + * { margin-top: 2rem; } /* ─── Responsive Helpers Extended ─── */ @media (max-width: 480px) { .cx-hide-xs { display: none !important; } .cx-text-xs-center { text-align: center !important; } .cx-stack-xs { flex-direction: column !important; } .cx-full-xs { width: 100% !important; } } @media (min-width: 481px) and (max-width: 768px) { .cx-hide-sm { display: none !important; } .cx-cols-sm-1 { grid-template-columns: 1fr !important; } .cx-cols-sm-2 { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 769px) and (max-width: 1024px) { .cx-hide-md { display: none !important; } .cx-cols-md-2 { grid-template-columns: repeat(2, 1fr) !important; } .cx-cols-md-3 { grid-template-columns: repeat(3, 1fr) !important; } } @media (min-width: 1025px) { .cx-hide-lg { display: none !important; } } @media (min-width: 1280px) { .cx-cols-xl-5 { grid-template-columns: repeat(5, 1fr) !important; } .cx-cols-xl-6 { grid-template-columns: repeat(6, 1fr) !important; } } /* ─── Color Overlay Utilities ─── */ .cx-overlay-dark { position: relative; } .cx-overlay-dark::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 1; pointer-events: none; } .cx-overlay-purple::before { content: ''; position: absolute; inset: 0; background: rgba(168,85,247,0.1); z-index: 1; pointer-events: none; } /* ─── Interactive States ─── */ .cx-hover-lift { transition: transform 0.2s, box-shadow 0.2s; } .cx-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); } .cx-hover-glow { transition: box-shadow 0.2s; } .cx-hover-glow:hover { box-shadow: 0 0 20px rgba(168,85,247,0.3); } .cx-hover-scale { transition: transform 0.2s; } .cx-hover-scale:hover { transform: scale(1.02); } .cx-active-press:active { transform: scale(0.97); } .cx-focus-ring:focus-visible { outline: 2px solid rgba(168,85,247,0.5); outline-offset: 2px; } /* ─── Z-Index Scale ─── */ .cx-z-dropdown { z-index: 100; } .cx-z-sticky { z-index: 200; } .cx-z-overlay { z-index: 300; } .cx-z-modal { z-index: 400; } .cx-z-popover { z-index: 500; } .cx-z-toast { z-index: 600; } .cx-z-tooltip { z-index: 700; } .cx-z-max { z-index: 9999; } /* ─── Cursor Utilities ─── */ .cx-cursor-grab { cursor: grab; } .cx-cursor-grab:active { cursor: grabbing; } .cx-cursor-pointer { cursor: pointer; } .cx-cursor-zoom-in { cursor: zoom-in; } .cx-cursor-not-allowed { cursor: not-allowed; opacity: 0.5; } /* ─── Selection Styling ─── */ ::selection { background: rgba(168,85,247,0.3); color: white; } ::-moz-selection { background: rgba(168,85,247,0.3); color: white; } /* ─── Skeleton Loading ─── */ .cx-skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%); background-size: 200% 100%; animation: cx-skeleton 1.5s ease-in-out infinite; border-radius: var(--cx-radius); } @keyframes cx-skeleton { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .cx-skeleton-text { height: 0.75rem; width: 80%; } .cx-skeleton-heading { height: 1.25rem; width: 60%; } .cx-skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; } .cx-skeleton-card { height: 8rem; } /* ─── Divider Variants ─── */ .cx-divider-gradient { border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(168,85,247,0.3), transparent); } .cx-divider-dashed { border: none; height: 0; border-top: 2px dashed rgba(168,85,247,0.15); } .cx-divider-dotted { border: none; height: 0; border-top: 2px dotted rgba(168,85,247,0.15); } /* ─── Clip Path Shapes ─── */ .cx-clip-circle { clip-path: circle(50%); } .cx-clip-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .cx-clip-hexagon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .cx-clip-chevron { clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%); } /* ─── Smooth Page Transitions ─── */ .cx-page-enter { animation: cx-slide-up 0.3s ease-out; } .cx-page-fade { animation: cx-fade-in 0.3s ease-out; } @keyframes cx-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════════ PHASE 8 — MEGA CSS EXPANSION: TYPOGRAPHY · CARDS · INTERACTIONS · COLORS · EFFECTS · LAYOUT SYSTEMS · COMPONENT STYLES ═══════════════════════════════════════════════════════════════════════ */ /* ─── Typography Scale ─── */ .cx-text-3xs { font-size: clamp(0.5rem, 0.4rem + 0.2vw, 0.625rem); line-height: 0.75rem; } .cx-text-2xs { font-size: clamp(0.625rem, 0.55rem + 0.2vw, 0.6875rem); line-height: 0.875rem; } .cx-text-xs { font-size: clamp(0.6875rem, 0.6rem + 0.25vw, 0.75rem); line-height: 1rem; } .cx-text-sm { font-size: clamp(0.75rem, 0.65rem + 0.3vw, 0.8125rem); line-height: 1.25rem; } .cx-text-base { font-size: clamp(0.8125rem, 0.7rem + 0.35vw, 0.875rem); line-height: 1.5rem; } .cx-text-lg { font-size: clamp(0.875rem, 0.75rem + 0.4vw, 1rem); line-height: 1.75rem; } .cx-text-xl { font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem); line-height: 1.75rem; } .cx-text-2xl { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.5rem); line-height: 2rem; } .cx-text-3xl { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 2.25rem; letter-spacing: -0.015em; } .cx-text-4xl { font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.02em; } .cx-text-5xl { font-size: 3rem; line-height: 1; letter-spacing: -0.025em; } .cx-text-6xl { font-size: 3.75rem; line-height: 1; letter-spacing: -0.025em; } .cx-text-hero { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; } /* Font weight utilities */ .cx-thin { font-weight: 100; } .cx-light { font-weight: 300; } .cx-normal { font-weight: 400; } .cx-medium { font-weight: 500; } .cx-semibold { font-weight: 600; } .cx-bold { font-weight: 700; } .cx-extrabold { font-weight: 800; } .cx-black { font-weight: 900; } /* Letter spacing */ .cx-tracking-tighter { letter-spacing: -0.05em; } .cx-tracking-tight { letter-spacing: -0.025em; } .cx-tracking-normal { letter-spacing: 0; } .cx-tracking-wide { letter-spacing: 0.025em; } .cx-tracking-wider { letter-spacing: 0.05em; } .cx-tracking-widest { letter-spacing: 0.1em; } /* Leading */ .cx-leading-none { line-height: 1; } .cx-leading-tight { line-height: 1.25; } .cx-leading-snug { line-height: 1.375; } .cx-leading-normal { line-height: 1.5; } .cx-leading-relaxed { line-height: 1.625; } .cx-leading-loose { line-height: 2; } /* Prose styling for readable text blocks */ .cx-prose { font-size: 0.875rem; line-height: 1.7; color: var(--cx-gray-300, #d1d5db); } .cx-prose h1, .cx-prose h2, .cx-prose h3 { color: var(--cx-gray-100, #f3f4f6); margin-top: 1.5em; margin-bottom: 0.5em; } .cx-prose p + p { margin-top: 1em; } .cx-prose code { background: rgba(168,85,247,0.1); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.85em; } .cx-prose a { color: var(--cx-purple-400, #c084fc); text-decoration: underline; text-underline-offset: 2px; } .cx-prose blockquote { border-left: 3px solid var(--cx-purple-500, #a855f7); padding-left: 1em; color: var(--cx-gray-400, #9ca3af); font-style: italic; } /* ─── Enhanced Card System ─── */ .cx-card-base { background: rgba(16, 21, 42, 0.55); border: 1px solid rgba(168, 85, 247, 0.08); border-radius: var(--cx-radius, 0.5rem); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .cx-card-hover:hover { border-color: rgba(168, 85, 247, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(168, 85, 247, 0.06); transform: translateY(-1px); } .cx-card-gradient { background: linear-gradient(135deg, rgba(16, 21, 42, 0.75) 0%, rgba(30, 27, 75, 0.35) 100%); border: 1px solid rgba(168, 85, 247, 0.12); } .cx-card-gradient:hover { border-color: rgba(168, 85, 247, 0.25); box-shadow: 0 8px 30px rgba(168, 85, 247, 0.1); } .cx-card-frosted { background: rgba(16, 21, 42, 0.45); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(168, 85, 247, 0.06); } .cx-card-elevated { background: rgba(16, 21, 42, 0.85); border: 1px solid rgba(168, 85, 247, 0.1); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); } .cx-card-elevated:hover { box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(168, 85, 247, 0.1); transform: translateY(-2px); } .cx-card-neon { background: rgba(10, 14, 30, 0.75); border: 1px solid rgba(168, 85, 247, 0.3); box-shadow: 0 0 15px rgba(168, 85, 247, 0.1), inset 0 0 15px rgba(168, 85, 247, 0.03); } .cx-card-neon:hover { border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 0 30px rgba(168, 85, 247, 0.2), inset 0 0 20px rgba(168, 85, 247, 0.05); } .cx-card-neon-cyan { background: rgba(10, 14, 30, 0.75); border: 1px solid rgba(6, 182, 212, 0.3); box-shadow: 0 0 15px rgba(6, 182, 212, 0.1), inset 0 0 15px rgba(6, 182, 212, 0.03); } .cx-card-neon-cyan:hover { border-color: rgba(6, 182, 212, 0.5); box-shadow: 0 0 30px rgba(6, 182, 212, 0.2), inset 0 0 20px rgba(6, 182, 212, 0.05); } .cx-card-neon-green { background: rgba(10, 14, 30, 0.75); border: 1px solid rgba(16, 185, 129, 0.3); box-shadow: 0 0 15px rgba(16, 185, 129, 0.1), inset 0 0 15px rgba(16, 185, 129, 0.03); } .cx-card-subtle { background: rgba(168, 85, 247, 0.02); border: 1px solid rgba(168, 85, 247, 0.04); } .cx-card-subtle:hover { background: rgba(168, 85, 247, 0.04); border-color: rgba(168, 85, 247, 0.08); } .cx-card-interactive { cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .cx-card-interactive:hover { background: rgba(168, 85, 247, 0.05); border-color: rgba(168, 85, 247, 0.2); transform: translateY(-1px); } .cx-card-interactive:active { transform: translateY(0); } /* Animated gradient border card */ .cx-card-animated-border { position: relative; background: rgba(10, 10, 18, 0.9); border-radius: var(--cx-radius, 0.5rem); overflow: hidden; } .cx-card-animated-border::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient(from 0deg, #7c3aed, #06b6d4, #10b981, #f59e0b, #ef4444, #ec4899, #7c3aed); animation: cx-border-rotate 4s linear infinite; z-index: -1; } .cx-card-animated-border::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; background: rgba(10, 10, 18, 0.95); z-index: -1; } @keyframes cx-border-rotate { to { transform: rotate(360deg); } } /* ─── Extended Color Palette ─── */ :root { /* Purple scale */ --cx-purple-50: #faf5ff; --cx-purple-100: #f3e8ff; --cx-purple-200: #e9d5ff; --cx-purple-300: #d8b4fe; --cx-purple-400: #c084fc; --cx-purple-500: #a855f7; --cx-purple-600: #9333ea; --cx-purple-700: #7c3aed; --cx-purple-800: #6b21a8; --cx-purple-900: #581c87; --cx-purple-950: #3b0764; /* Cyan scale */ --cx-cyan-50: #ecfeff; --cx-cyan-100: #cffafe; --cx-cyan-200: #a5f3fc; --cx-cyan-300: #67e8f9; --cx-cyan-400: #22d3ee; --cx-cyan-500: #06b6d4; --cx-cyan-600: #0891b2; --cx-cyan-700: #0e7490; --cx-cyan-800: #155e75; --cx-cyan-900: #164e63; /* Green scale */ --cx-green-50: #ecfdf5; --cx-green-100: #d1fae5; --cx-green-200: #a7f3d0; --cx-green-300: #6ee7b7; --cx-green-400: #34d399; --cx-green-500: #10b981; --cx-green-600: #059669; --cx-green-700: #047857; --cx-green-800: #065f46; --cx-green-900: #064e3b; /* Amber scale */ --cx-amber-50: #fffbeb; --cx-amber-100: #fef3c7; --cx-amber-200: #fde68a; --cx-amber-300: #fcd34d; --cx-amber-400: #fbbf24; --cx-amber-500: #f59e0b; --cx-amber-600: #d97706; --cx-amber-700: #b45309; --cx-amber-800: #92400e; --cx-amber-900: #78350f; /* Red scale */ --cx-red-50: #fef2f2; --cx-red-100: #fee2e2; --cx-red-200: #fecaca; --cx-red-300: #fca5a5; --cx-red-400: #f87171; --cx-red-500: #ef4444; --cx-red-600: #dc2626; --cx-red-700: #b91c1c; --cx-red-800: #991b1b; --cx-red-900: #7f1d1d; /* Gray scale (dark-theme optimized) */ --cx-gray-50: #f9fafb; --cx-gray-100: #f3f4f6; --cx-gray-200: #e5e7eb; --cx-gray-300: #d1d5db; --cx-gray-400: #9ca3af; --cx-gray-500: #6b7280; --cx-gray-600: #4b5563; --cx-gray-700: #374151; --cx-gray-800: #1f2937; --cx-gray-850: #18202f; --cx-gray-900: #111827; --cx-gray-925: #0d1320; --cx-gray-950: #030712; /* Semantic colors */ --cx-success: #10b981; --cx-warning: #f59e0b; --cx-danger: #ef4444; --cx-info: #a855f7; --cx-link: #c084fc; /* Surface colors */ --cx-surface-0: #020617; --cx-surface-1: #0a0a12; --cx-surface-2: #111827; --cx-surface-3: #1f2937; --cx-surface-4: #374151; --cx-surface-overlay: rgba(0, 0, 0, 0.6); } /* Status color backgrounds */ .cx-bg-success { background: rgba(16, 185, 129, 0.1); } .cx-bg-warning { background: rgba(245, 158, 11, 0.1); } .cx-bg-danger { background: rgba(239, 68, 68, 0.1); } .cx-bg-info { background: rgba(168, 85, 247, 0.1); } .cx-bg-success-solid { background: var(--cx-green-500); color: white; } .cx-bg-warning-solid { background: var(--cx-amber-500); color: black; } .cx-bg-danger-solid { background: var(--cx-red-500); color: white; } .cx-bg-info-solid { background: var(--cx-purple-500); color: white; } /* Text status colors */ .cx-text-success { color: var(--cx-green-400); } .cx-text-warning { color: var(--cx-amber-400); } .cx-text-danger { color: var(--cx-red-400); } .cx-text-info { color: var(--cx-purple-400); } .cx-text-muted { color: var(--cx-gray-500); } .cx-text-subtle { color: var(--cx-gray-400); } /* Border status colors */ .cx-border-success { border-color: rgba(16, 185, 129, 0.2); } .cx-border-warning { border-color: rgba(245, 158, 11, 0.2); } .cx-border-danger { border-color: rgba(239, 68, 68, 0.2); } .cx-border-info { border-color: rgba(168, 85, 247, 0.2); } /* ─── Enhanced Interaction States ─── */ /* Transition presets */ .cx-transition-fast { transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); } .cx-transition { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .cx-transition-slow { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .cx-transition-spring { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .cx-transition-none { transition: none; } /* Enhanced focus ring system */ .cx-focus-ring:focus-visible { outline: 2px solid rgba(168, 85, 247, 0.5); outline-offset: 2px; } .cx-focus-glow:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.3), 0 0 15px rgba(168, 85, 247, 0.15); } .cx-focus-within:focus-within { border-color: rgba(168, 85, 247, 0.4); box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15); } /* Enhanced input focus */ .cx-input-focus { transition: border-color 0.2s, box-shadow 0.2s; } .cx-input-focus:focus { border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1), 0 0 20px rgba(168, 85, 247, 0.05); outline: none; } /* Enhanced button interactions */ .cx-btn-press { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .cx-btn-press:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .cx-btn-press:active { transform: translateY(0) scale(0.98); box-shadow: none; } .cx-btn-ripple { position: relative; overflow: hidden; } .cx-btn-ripple::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 10%, transparent 10%); transform: scale(10); opacity: 0; transition: transform 0.5s, opacity 1s; } .cx-btn-ripple:active::after { transform: scale(0); opacity: 1; transition: 0s; } /* Row hover effects */ .cx-row-hover:hover { background: rgba(168, 85, 247, 0.04); } .cx-row-hover-strong:hover { background: rgba(168, 85, 247, 0.08); box-shadow: inset 3px 0 0 var(--cx-purple-500); } /* Link hover */ .cx-link-hover { color: var(--cx-purple-400); text-decoration: none; transition: color 0.2s; } .cx-link-hover:hover { color: var(--cx-purple-300); text-decoration: underline; text-underline-offset: 3px; } /* ─── Enhanced Scrollbar (Global) ─── */ * { scrollbar-width: thin; scrollbar-color: rgba(168, 85, 247, 0.15) transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.15); border-radius: 3px; } *::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.3); } /* ─── Enhanced Visual Effects ─── */ /* Refined glass morphism */ .cx-glass-purple { background: rgba(124, 58, 237, 0.08); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border: 1px solid rgba(168, 85, 247, 0.12); } .cx-glass-surface { background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.05); } /* Animated glow border */ .cx-glow-border { position: relative; } .cx-glow-border::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), transparent 40%, transparent 60%, rgba(6, 182, 212, 0.3)); z-index: -1; opacity: 0; transition: opacity 0.3s; } .cx-glow-border:hover::before { opacity: 1; } /* Pulsing dot indicator */ .cx-pulse-dot { position: relative; } .cx-pulse-dot::after { content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-green-500); animation: cx-pulse-ring 2s ease-in-out infinite; } @keyframes cx-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* Shine effect on hover */ .cx-shine { position: relative; overflow: hidden; } .cx-shine::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); transform: skewX(-25deg); transition: left 0.6s ease; } .cx-shine:hover::before { left: 125%; } /* Noise texture overlay */ .cx-noise { position: relative; } .cx-noise::after { content: ''; position: absolute; inset: 0; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); pointer-events: none; border-radius: inherit; } /* ─── Layout Enhancement System ─── */ /* Auto-fit grid */ .cx-grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .cx-grid-auto-md { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .cx-grid-auto-lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .cx-grid-auto-xl { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.5rem; } /* Dashboard grids */ .cx-grid-dashboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .cx-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .cx-grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .cx-grid-sidebar { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 1.5rem; } .cx-grid-sidebar-narrow { display: grid; grid-template-columns: minmax(160px, 200px) 1fr; gap: 1rem; } @media (max-width: 768px) { .cx-grid-sidebar, .cx-grid-sidebar-narrow { grid-template-columns: 1fr; } } /* Stack / flex shortcuts */ .cx-stack { display: flex; flex-direction: column; } .cx-hstack { display: flex; flex-direction: row; align-items: center; } .cx-center { display: flex; align-items: center; justify-content: center; } .cx-between { display: flex; align-items: center; justify-content: space-between; } .cx-wrap { display: flex; flex-wrap: wrap; } /* Sizing utilities */ .cx-w-full { width: 100%; } .cx-w-auto { width: auto; } .cx-w-fit { width: fit-content; } .cx-w-max { width: max-content; } .cx-w-min { width: min-content; } .cx-h-screen { height: 100vh; } .cx-min-h-screen { min-height: 100vh; } /* ─── Enhanced Component Styles ─── */ /* Improved sidebar active state */ .cx-nav-active { background: linear-gradient(90deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.05) 100%); border-left: 3px solid var(--cx-purple-500); color: var(--cx-purple-300); font-weight: 500; } /* Enhanced table styles */ .cx-table-striped tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); } .cx-table-hover tr:hover { background: rgba(168, 85, 247, 0.04); } .cx-table-bordered { border: 1px solid rgba(168, 85, 247, 0.1); } .cx-table-bordered th, .cx-table-bordered td { border: 1px solid rgba(168, 85, 247, 0.06); } /* Enhanced badge styles */ .cx-badge-glow { box-shadow: 0 0 8px currentColor; } .cx-badge-outline { background: transparent; border: 1px solid currentColor; } .cx-badge-pill { border-radius: 9999px; padding-left: 0.75em; padding-right: 0.75em; } /* Status indicator styles */ .cx-status-online { color: var(--cx-green-400); } .cx-status-offline { color: var(--cx-red-400); } .cx-status-idle { color: var(--cx-amber-400); } .cx-status-busy { color: var(--cx-red-500); } .cx-dot-online { background: var(--cx-green-500); box-shadow: 0 0 6px var(--cx-green-500); } .cx-dot-offline { background: var(--cx-red-500); } .cx-dot-idle { background: var(--cx-amber-500); } /* Metric card accent colors */ .cx-accent-purple { border-left: 3px solid var(--cx-purple-500); } .cx-accent-cyan { border-left: 3px solid var(--cx-cyan-500); } .cx-accent-green { border-left: 3px solid var(--cx-green-500); } .cx-accent-amber { border-left: 3px solid var(--cx-amber-500); } .cx-accent-red { border-left: 3px solid var(--cx-red-500); } /* ─── Radius Scale ─── */ .cx-rounded-none { border-radius: 0; } .cx-rounded-sm { border-radius: 0.25rem; } .cx-rounded { border-radius: 0.375rem; } .cx-rounded-md { border-radius: 0.5rem; } .cx-rounded-lg { border-radius: 0.75rem; } .cx-rounded-xl { border-radius: 1rem; } .cx-rounded-2xl { border-radius: 1.5rem; } .cx-rounded-full { border-radius: 9999px; } /* ─── Opacity Utilities ─── */ .cx-opacity-0 { opacity: 0; } .cx-opacity-5 { opacity: 0.05; } .cx-opacity-10 { opacity: 0.1; } .cx-opacity-20 { opacity: 0.2; } .cx-opacity-30 { opacity: 0.3; } .cx-opacity-50 { opacity: 0.5; } .cx-opacity-70 { opacity: 0.7; } .cx-opacity-80 { opacity: 0.8; } .cx-opacity-100 { opacity: 1; } /* ─── Backdrop Filter Utilities ─── */ .cx-backdrop-blur-sm { backdrop-filter: blur(4px); } .cx-backdrop-blur { backdrop-filter: blur(8px); } .cx-backdrop-blur-md { backdrop-filter: blur(12px); } .cx-backdrop-blur-lg { backdrop-filter: blur(16px); } .cx-backdrop-blur-xl { backdrop-filter: blur(24px); } .cx-backdrop-saturate { backdrop-filter: saturate(180%); } .cx-backdrop-grayscale { backdrop-filter: grayscale(100%); } /* ─── Misc Utilities ─── */ .cx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .cx-no-select { user-select: none; } .cx-select-all { user-select: all; } .cx-break-word { word-break: break-word; overflow-wrap: anywhere; } .cx-whitespace-pre { white-space: pre; } .cx-whitespace-pre-wrap { white-space: pre-wrap; } .cx-pointer-none { pointer-events: none; } .cx-overflow-hidden { overflow: hidden; } .cx-overflow-auto { overflow: auto; } /* ─── Inset / Position Utilities ─── */ .cx-inset-0 { inset: 0; } .cx-absolute { position: absolute; } .cx-relative { position: relative; } .cx-fixed { position: fixed; } .cx-sticky { position: sticky; top: 0; } /* ─── Enhanced Responsive ─── */ @media (max-width: 768px) { .cx-grid-dashboard { grid-template-columns: repeat(2, 1fr); } .cx-grid-sidebar { grid-template-columns: 1fr; } .cx-grid-sidebar-narrow { grid-template-columns: 1fr; } .cx-grid-3col { grid-template-columns: 1fr; } } @media (max-width: 480px) { .cx-grid-dashboard { grid-template-columns: 1fr; } .cx-grid-2col { grid-template-columns: 1fr; } } /* ─── Dark Mode Refinements (defaults — these apply always) ─── */ [data-cx] { color-scheme: dark; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Improved contrast for key elements */ [data-cx] input, [data-cx] textarea, [data-cx] select { color-scheme: dark; } /* ─── Accessibility ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══ PHASE 9: Panel System ═══ */ .cx-panel { background: rgba(17, 24, 39, 0.7); border: 1px solid rgba(168, 85, 247, 0.12); border-radius: 0.75rem; overflow: hidden; transition: border-color 0.2s var(--cx-ease), box-shadow 0.2s var(--cx-ease); } .cx-panel:hover { border-color: rgba(168, 85, 247, 0.25); box-shadow: 0 2px 12px rgba(168, 85, 247, 0.06); } .cx-panel-header { padding: 0.75rem 1rem; border-bottom: 1px solid rgba(168, 85, 247, 0.1); background: rgba(17, 24, 39, 0.5); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .cx-panel-header-title { font-size: 0.75rem; font-weight: 600; color: var(--cx-purple-200, #e9d5ff); display: flex; align-items: center; gap: 0.5rem; } .cx-panel-header-actions { display: flex; align-items: center; gap: 0.375rem; } .cx-panel-body { padding: var(--cx-panel-padding); } .cx-panel-body-compact { padding: 0.625rem 0.75rem; } .cx-panel-body-flush { padding: 0; } .cx-panel-footer { padding: 0.625rem 1rem; border-top: 1px solid rgba(168, 85, 247, 0.08); background: rgba(3, 7, 18, 0.3); display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; } /* Panel variants */ .cx-panel-accent { border-left: 3px solid var(--cx-purple-500, #a855f7); } .cx-panel-success { border-left: 3px solid var(--cx-success, #10b981); } .cx-panel-success .cx-panel-header { border-bottom-color: rgba(16, 185, 129, 0.15); } .cx-panel-warning { border-left: 3px solid var(--cx-warning, #f59e0b); } .cx-panel-warning .cx-panel-header { border-bottom-color: rgba(245, 158, 11, 0.15); } .cx-panel-danger { border-left: 3px solid var(--cx-danger, #ef4444); } .cx-panel-danger .cx-panel-header { border-bottom-color: rgba(239, 68, 68, 0.15); } .cx-panel-info { border-left: 3px solid #3b82f6; } .cx-panel-info .cx-panel-header { border-bottom-color: rgba(59, 130, 246, 0.15); } /* Nested panel */ .cx-panel .cx-panel { background: rgba(17, 24, 39, 0.4); border-color: rgba(168, 85, 247, 0.08); } .cx-panel .cx-panel .cx-panel { background: rgba(17, 24, 39, 0.25); } /* Panel with glow */ .cx-panel-glow { box-shadow: 0 0 20px rgba(168, 85, 247, 0.06), inset 0 1px 0 rgba(168, 85, 247, 0.05); } .cx-panel-glow:hover { box-shadow: 0 0 30px rgba(168, 85, 247, 0.1), inset 0 1px 0 rgba(168, 85, 247, 0.08); } /* Collapsible panel */ .cx-panel-collapsible .cx-panel-header { cursor: pointer; user-select: none; } .cx-panel-collapsible .cx-panel-header:hover { background: rgba(168, 85, 247, 0.05); } /* ═══ Card Variant Expansion ═══ */ .cx-card-metric { background: rgba(17, 24, 39, 0.7); border: 1px solid rgba(168, 85, 247, 0.12); border-radius: 0.75rem; padding: 1rem; position: relative; overflow: hidden; } .cx-card-metric::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cx-purple-500, #a855f7), var(--cx-purple-300, #d8b4fe)); } .cx-card-feature { background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(168, 85, 247, 0.1); border-radius: 0.75rem; padding: 1.25rem; text-align: center; transition: all 0.3s ease; } .cx-card-feature:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.3); } .cx-card-feature-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; font-size: 1.25rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.15); } .cx-card-media { background: rgba(17, 24, 39, 0.7); border: 1px solid rgba(168, 85, 247, 0.1); border-radius: 0.75rem; overflow: hidden; } .cx-card-media-image { width: 100%; height: 140px; object-fit: cover; border-bottom: 1px solid rgba(168, 85, 247, 0.1); } .cx-card-media-body { padding: 0.875rem; } .cx-card-split { display: flex; background: rgba(17, 24, 39, 0.7); border: 1px solid rgba(168, 85, 247, 0.12); border-radius: 0.75rem; overflow: hidden; } .cx-card-split-left { flex: 0 0 40%; padding: 1rem; display: flex; align-items: center; justify-content: center; background: rgba(168, 85, 247, 0.03); border-right: 1px solid rgba(168, 85, 247, 0.08); } .cx-card-split-right { flex: 1; padding: 1rem; } .cx-card-profile { background: rgba(17, 24, 39, 0.7); border: 1px solid rgba(168, 85, 247, 0.12); border-radius: 0.75rem; text-align: center; padding: 1.5rem 1rem; position: relative; } .cx-card-profile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(6, 182, 212, 0.1)); border-radius: 0.75rem 0.75rem 0 0; } .cx-card-glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.75rem; } .cx-card-bordered-top { border-top: 3px solid var(--cx-purple-500, #a855f7); } .cx-card-bordered-top-cyan { border-top: 3px solid var(--cx-cyan-500, #06b6d4); } .cx-card-bordered-top-green { border-top: 3px solid var(--cx-success, #10b981); } .cx-card-bordered-top-amber { border-top: 3px solid var(--cx-warning, #f59e0b); } .cx-card-bordered-top-red { border-top: 3px solid var(--cx-danger, #ef4444); } /* ═══ Progress Bar Variants ═══ */ .cx-progress { width: 100%; height: 0.5rem; background: rgba(31, 41, 55, 0.8); border-radius: 9999px; overflow: hidden; position: relative; } .cx-progress-bar { height: 100%; border-radius: 9999px; transition: width 0.5s var(--cx-ease), filter 0.2s var(--cx-ease); position: relative; } .cx-progress-xs { height: 0.25rem; } .cx-progress-sm { height: 0.375rem; } .cx-progress-md { height: 0.5rem; } .cx-progress-lg { height: 0.75rem; } .cx-progress-xl { height: 1rem; } .cx-progress-striped .cx-progress-bar { background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75% ); background-size: 1rem 1rem; } .cx-progress-animated .cx-progress-bar { background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75% ); background-size: 1rem 1rem; animation: cx-progress-stripe 1s linear infinite; } @keyframes cx-progress-stripe { 0% { background-position: 1rem 0; } 100% { background-position: 0 0; } } .cx-progress-glow .cx-progress-bar { box-shadow: 0 0 8px rgba(168, 85, 247, 0.4), 0 0 20px rgba(168, 85, 247, 0.1); } .cx-progress-indeterminate .cx-progress-bar { width: 30% !important; animation: cx-progress-indeterminate 1.5s ease-in-out infinite; } @keyframes cx-progress-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } .cx-progress-purple .cx-progress-bar { background: linear-gradient(90deg, #7c3aed, #a855f7); } .cx-progress-cyan .cx-progress-bar { background: linear-gradient(90deg, #0891b2, #06b6d4); } .cx-progress-green .cx-progress-bar { background: linear-gradient(90deg, #059669, #10b981); } .cx-progress-amber .cx-progress-bar { background: linear-gradient(90deg, #d97706, #f59e0b); } .cx-progress-red .cx-progress-bar { background: linear-gradient(90deg, #dc2626, #ef4444); } .cx-progress-rainbow .cx-progress-bar { background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981, #06b6d4, #a855f7); } .cx-progress-bar:hover .cx-progress-fill, .cx-progress:hover .cx-progress-bar { filter: brightness(1.2); } /* ═══ Animation Library Expansion ═══ */ /* Fade variants */ @keyframes cx-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes cx-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes cx-fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes cx-fade-in-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes cx-fade-in-left { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } @keyframes cx-fade-in-right { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } .cx-animate-fade-in { animation: cx-fade-in 0.3s ease-out; } .cx-animate-fade-out { animation: cx-fade-out 0.3s ease-out; } .cx-animate-fade-in-up { animation: cx-fade-in-up 0.4s ease-out; } .cx-animate-fade-in-down { animation: cx-fade-in-down 0.4s ease-out; } .cx-animate-fade-in-left { animation: cx-fade-in-left 0.4s ease-out; } .cx-animate-fade-in-right { animation: cx-fade-in-right 0.4s ease-out; } /* Scale variants */ @keyframes cx-scale-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes cx-scale-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } } @keyframes cx-pop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes cx-jelly { 0% { transform: scale(1,1); } 25% { transform: scale(0.9,1.1); } 50% { transform: scale(1.1,0.9); } 75% { transform: scale(0.95,1.05); } 100% { transform: scale(1,1); } } .cx-animate-scale-in { animation: cx-scale-in 0.3s ease-out; } .cx-animate-scale-out { animation: cx-scale-out 0.3s ease-out; } .cx-animate-pop { animation: cx-pop 0.3s ease-in-out; } .cx-animate-jelly { animation: cx-jelly 0.5s ease-in-out; } /* Rotate & Flip */ @keyframes cx-spin-slow { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes cx-flip-x { from { transform: rotateX(0); } to { transform: rotateX(360deg); } } @keyframes cx-flip-y { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } @keyframes cx-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } } .cx-animate-spin-slow { animation: cx-spin-slow 3s linear infinite; } .cx-animate-flip-x { animation: cx-flip-x 0.6s ease-in-out; } .cx-animate-flip-y { animation: cx-flip-y 0.6s ease-in-out; } .cx-animate-wiggle { animation: cx-wiggle 0.5s ease-in-out; } /* Glow pulse variants */ @keyframes cx-glow-breathe { 0%, 100% { box-shadow: 0 0 5px rgba(168, 85, 247, 0.1); } 50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), 0 0 40px rgba(168, 85, 247, 0.1); } } @keyframes cx-glow-breathe-cyan { 0%, 100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.1); } 50% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.3), 0 0 40px rgba(6, 182, 212, 0.1); } } @keyframes cx-glow-breathe-green { 0%, 100% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.1); } 50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.1); } } .cx-animate-glow-breathe { animation: cx-glow-breathe 3s ease-in-out infinite; } .cx-animate-glow-breathe-cyan { animation: cx-glow-breathe-cyan 3s ease-in-out infinite; } .cx-animate-glow-breathe-green { animation: cx-glow-breathe-green 3s ease-in-out infinite; } /* Gradient shift */ @keyframes cx-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .cx-animate-gradient { background-size: 200% 200%; animation: cx-gradient-shift 4s ease infinite; } /* Typewriter */ @keyframes cx-typewriter { from { width: 0; } to { width: 100%; } } @keyframes cx-blink-caret { from, to { border-color: transparent; } 50% { border-color: var(--cx-purple-400, #c084fc); } } .cx-typewriter { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--cx-purple-400, #c084fc); animation: cx-typewriter 3s steps(30, end), cx-blink-caret 0.75s step-end infinite; } /* Staggered children animation */ .cx-stagger > * { animation: cx-fade-in-up 0.4s ease-out both; } .cx-stagger > *:nth-child(1) { animation-delay: 0ms; } .cx-stagger > *:nth-child(2) { animation-delay: 50ms; } .cx-stagger > *:nth-child(3) { animation-delay: 100ms; } .cx-stagger > *:nth-child(4) { animation-delay: 150ms; } .cx-stagger > *:nth-child(5) { animation-delay: 200ms; } .cx-stagger > *:nth-child(6) { animation-delay: 250ms; } .cx-stagger > *:nth-child(7) { animation-delay: 300ms; } .cx-stagger > *:nth-child(8) { animation-delay: 350ms; } .cx-stagger > *:nth-child(9) { animation-delay: 400ms; } .cx-stagger > *:nth-child(10) { animation-delay: 450ms; } .cx-stagger > *:nth-child(11) { animation-delay: 500ms; } .cx-stagger > *:nth-child(12) { animation-delay: 550ms; } /* Subtle hover micro-interactions */ .cx-hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; } .cx-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .cx-hover-glow { transition: box-shadow 0.3s ease; } .cx-hover-glow:hover { box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); } .cx-hover-scale { transition: transform 0.2s ease; } .cx-hover-scale:hover { transform: scale(1.02); } .cx-hover-bright { transition: filter 0.2s ease; } .cx-hover-bright:hover { filter: brightness(1.1); } /* ═══ Visual Elements ═══ */ /* Gradient Orbs (decorative) */ .cx-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.15; pointer-events: none; } .cx-orb-purple { background: #a855f7; } .cx-orb-cyan { background: #06b6d4; } .cx-orb-pink { background: #ec4899; } .cx-orb-green { background: #10b981; } .cx-orb-sm { width: 100px; height: 100px; } .cx-orb-md { width: 200px; height: 200px; } .cx-orb-lg { width: 300px; height: 300px; } .cx-orb-animate { animation: cx-float 6s ease-in-out infinite; } /* Decorative Separators */ .cx-separator { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0; } .cx-separator::before, .cx-separator::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.2), transparent); } .cx-separator-label { font-size: 0.625rem; color: var(--cx-gray-400, #9ca3af); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; } .cx-separator-gradient { height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.3), rgba(6, 182, 212, 0.3), transparent); margin: 1.5rem 0; } .cx-separator-dotted { border-top: 2px dotted rgba(168, 85, 247, 0.15); margin: 1.5rem 0; } .cx-separator-thick { height: 2px; background: linear-gradient(90deg, var(--cx-purple-500, #a855f7), transparent); margin: 1.5rem 0; border-radius: 1px; } /* Callout / Tip box */ .cx-callout { padding: 0.875rem 1rem; border-radius: 0.5rem; border-left: 3px solid; font-size: 0.75rem; line-height: 1.5; } .cx-callout-info { border-color: #3b82f6; background: rgba(59, 130, 246, 0.06); color: #93bbfd; } .cx-callout-tip { border-color: #10b981; background: rgba(16, 185, 129, 0.06); color: #6ee7b7; } .cx-callout-warning { border-color: #f59e0b; background: rgba(245, 158, 11, 0.06); color: #fcd34d; } .cx-callout-danger { border-color: #ef4444; background: rgba(239, 68, 68, 0.06); color: #fca5a5; } .cx-callout-note { border-color: #a855f7; background: rgba(168, 85, 247, 0.06); color: #d8b4fe; } .cx-callout-title { font-weight: 600; margin-bottom: 0.25rem; font-size: 0.6875rem; } /* Chip / Tag */ .cx-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; border: 1px solid rgba(168, 85, 247, 0.2); background: rgba(168, 85, 247, 0.08); color: var(--cx-purple-300, #d8b4fe); transition: all 0.15s var(--cx-ease); } .cx-chip:hover { background: rgba(168, 85, 247, 0.15); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); filter: brightness(1.1); } .cx-chip-dismiss { width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; background: rgba(168, 85, 247, 0.15); color: var(--cx-gray-400); transition: all 0.15s ease; } .cx-chip-dismiss:hover { background: rgba(239, 68, 68, 0.3); color: #fca5a5; } .cx-chip-cyan { border-color: rgba(6, 182, 212, 0.2); background: rgba(6, 182, 212, 0.08); color: #67e8f9; } .cx-chip-green { border-color: rgba(16, 185, 129, 0.2); background: rgba(16, 185, 129, 0.08); color: #6ee7b7; } .cx-chip-amber { border-color: rgba(245, 158, 11, 0.2); background: rgba(245, 158, 11, 0.08); color: #fcd34d; } .cx-chip-red { border-color: rgba(239, 68, 68, 0.2); background: rgba(239, 68, 68, 0.08); color: #fca5a5; } /* Info Bar */ .cx-infobar { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 1rem; font-size: 0.6875rem; border-radius: 0.5rem; } .cx-infobar-info { background: rgba(59, 130, 246, 0.08); color: #93bbfd; border: 1px solid rgba(59, 130, 246, 0.15); } .cx-infobar-success { background: rgba(16, 185, 129, 0.08); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.15); } .cx-infobar-warning { background: rgba(245, 158, 11, 0.08); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.15); } .cx-infobar-danger { background: rgba(239, 68, 68, 0.08); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.15); } /* Toolbar */ .cx-toolbar { display: flex; align-items: center; gap: 0.25rem; padding: 0.375rem; background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(168, 85, 247, 0.1); border-radius: 0.5rem; } .cx-toolbar-divider { width: 1px; height: 1.25rem; background: rgba(168, 85, 247, 0.12); margin: 0 0.25rem; } /* ═══ List Styles ═══ */ .cx-list { list-style: none; padding: 0; margin: 0; } .cx-list-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; font-size: 0.75rem; color: var(--cx-text-secondary, #d1d5db); border-radius: 0.375rem; transition: background 0.15s var(--cx-ease), padding-left 0.15s var(--cx-ease); position: relative; } .cx-list-item:hover { background: rgba(168, 85, 247, 0.04); padding-left: calc(1rem + 4px); } .cx-list-item:hover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cx-purple-500); border-radius: 0 2px 2px 0; } .cx-list-item-active { background: rgba(168, 85, 247, 0.08); color: var(--cx-purple-300, #d8b4fe); } .cx-list-bordered .cx-list-item { border-bottom: 1px solid rgba(168, 85, 247, 0.06); } .cx-list-bordered .cx-list-item:last-child { border-bottom: none; } /* Description List */ .cx-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; font-size: 0.75rem; } .cx-dt { color: var(--cx-text-muted, #6b7280); font-weight: 500; } .cx-dd { color: var(--cx-text-secondary, #d1d5db); } /* Form Field Wrapper */ .cx-field { display: flex; flex-direction: column; gap: 0.375rem; } .cx-field-label { font-size: 0.6875rem; font-weight: 500; color: var(--cx-text-secondary, #d1d5db); } .cx-field-label-required::after { content: ' *'; color: var(--cx-danger, #ef4444); } .cx-field-help { font-size: 0.625rem; color: var(--cx-text-muted, #6b7280); } .cx-field-error { font-size: 0.625rem; color: var(--cx-danger, #ef4444); } .cx-field-error input, .cx-field.error input, .cx-field-error .cx-input, .cx-field.error .cx-input { border-color: rgba(239, 68, 68, 0.5) !important; } /* Input Group */ .cx-input-group { display: flex; align-items: stretch; } .cx-input-group > input, .cx-input-group > .cx-input { border-radius: 0; flex: 1; } .cx-input-group > :first-child { border-radius: 0.375rem 0 0 0.375rem; } .cx-input-group > :last-child { border-radius: 0 0.375rem 0.375rem 0; } .cx-input-addon { display: flex; align-items: center; padding: 0 0.625rem; font-size: 0.6875rem; background: rgba(31, 41, 55, 0.8); border: 1px solid rgba(168, 85, 247, 0.2); color: var(--cx-text-muted, #6b7280); white-space: nowrap; } /* Segmented Control */ .cx-segmented { display: inline-flex; background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(168, 85, 247, 0.12); border-radius: 0.5rem; padding: 0.1875rem; gap: 0.125rem; } .cx-segmented-item { padding: 0.375rem 0.75rem; font-size: 0.6875rem; font-weight: 500; border-radius: 0.375rem; color: var(--cx-text-muted, #6b7280); cursor: pointer; transition: all 0.15s ease; border: none; background: transparent; } .cx-segmented-item:hover { color: var(--cx-text-secondary, #d1d5db); } .cx-segmented-item.active, .cx-segmented-item-active { background: rgba(168, 85, 247, 0.15); color: var(--cx-purple-300, #d8b4fe); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } /* ═══ Pagination ═══ */ .cx-pagination { display: flex; align-items: center; gap: 0.25rem; } .cx-pagination-item { min-width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; border-radius: 0.375rem; color: var(--cx-text-muted, #6b7280); cursor: pointer; transition: all 0.15s var(--cx-ease); border: 1px solid transparent; background: transparent; } .cx-pagination-item:hover { background: rgba(168, 85, 247, 0.15); color: var(--cx-purple-300); transform: scale(1.1); } .cx-pagination-item.active, .cx-pagination-item-active { background: rgba(168, 85, 247, 0.15); color: var(--cx-purple-300, #d8b4fe); border-color: rgba(168, 85, 247, 0.25); } .cx-pagination-item:disabled, .cx-pagination-item[disabled] { opacity: 0.3; cursor: not-allowed; } /* Button Group */ .cx-btn-group { display: inline-flex; } .cx-btn-group > button, .cx-btn-group > .cx-btn { border-radius: 0; margin-left: -1px; } .cx-btn-group > :first-child { border-radius: 0.375rem 0 0 0.375rem; margin-left: 0; } .cx-btn-group > :last-child { border-radius: 0 0.375rem 0.375rem 0; } .cx-btn-group > button:hover, .cx-btn-group > .cx-btn:hover { z-index: 1; } /* Bottom Bar */ .cx-bottombar { display: flex; justify-content: space-around; align-items: center; padding: 0.5rem 0; background: rgba(3, 7, 18, 0.9); border-top: 1px solid rgba(168, 85, 247, 0.1); backdrop-filter: blur(8px); } .cx-bottombar-item { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; font-size: 0.5625rem; color: var(--cx-text-muted, #6b7280); cursor: pointer; transition: color 0.15s ease; padding: 0.25rem 0.5rem; } .cx-bottombar-item:hover, .cx-bottombar-item.active { color: var(--cx-purple-300, #d8b4fe); } /* ═══ Additional Utilities ═══ */ /* Rating stars */ .cx-rating { display: inline-flex; gap: 0.125rem; } .cx-rating-star { width: 1rem; height: 1rem; cursor: pointer; color: var(--cx-gray-600, #4b5563); transition: color 0.15s ease, transform 0.15s ease; } .cx-rating-star.filled { color: #fbbf24; } .cx-rating-star:hover { transform: scale(1.2); } /* Gauge */ .cx-gauge { position: relative; display: inline-flex; align-items: center; justify-content: center; } /* Chat bubble */ .cx-chat-bubble { max-width: 80%; padding: 0.5rem 0.75rem; border-radius: 0.75rem; font-size: 0.75rem; line-height: 1.4; } .cx-chat-sent { background: rgba(168, 85, 247, 0.15); color: var(--cx-purple-200, #e9d5ff); border-bottom-right-radius: 0.25rem; margin-left: auto; } .cx-chat-received { background: rgba(31, 41, 55, 0.8); color: var(--cx-text-secondary, #d1d5db); border-bottom-left-radius: 0.25rem; } .cx-chat-time { font-size: 0.5625rem; color: var(--cx-text-muted, #6b7280); margin-top: 0.25rem; } /* Log entry */ .cx-log { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; padding: 0.25rem 0.5rem; display: flex; gap: 0.5rem; align-items: baseline; border-left: 2px solid transparent; } .cx-log:hover { background: rgba(168, 85, 247, 0.03); } .cx-log-time { color: var(--cx-text-ghost, #4b5563); white-space: nowrap; } .cx-log-info { border-left-color: #3b82f6; } .cx-log-info .cx-log-level { color: #60a5fa; } .cx-log-warn { border-left-color: #f59e0b; } .cx-log-warn .cx-log-level { color: #fbbf24; } .cx-log-error { border-left-color: #ef4444; } .cx-log-error .cx-log-level { color: #f87171; } .cx-log-debug { border-left-color: #6b7280; } .cx-log-debug .cx-log-level { color: #9ca3af; } .cx-log-level { width: 3rem; text-transform: uppercase; font-weight: 600; font-size: 0.5625rem; } .cx-log-msg { color: var(--cx-text-secondary, #d1d5db); } /* Aspect ratio boxes */ .cx-aspect-square { aspect-ratio: 1/1; } .cx-aspect-video { aspect-ratio: 16/9; } .cx-aspect-photo { aspect-ratio: 4/3; } .cx-aspect-cinema { aspect-ratio: 21/9; } /* Truncation */ .cx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cx-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Scroll areas */ .cx-scroll-y { overflow-y: auto; overflow-x: hidden; } .cx-scroll-x { overflow-x: auto; overflow-y: hidden; } .cx-scroll-snap-x { scroll-snap-type: x mandatory; } .cx-scroll-snap-y { scroll-snap-type: y mandatory; } .cx-scroll-snap-item { scroll-snap-align: start; } /* Z-index layers */ .cx-z-base { z-index: 0; } .cx-z-raised { z-index: 10; } .cx-z-nav { z-index: 100; } .cx-z-sticky { z-index: 200; } .cx-z-overlay { z-index: 300; } .cx-z-modal { z-index: 400; } .cx-z-toast { z-index: 500; } .cx-z-max { z-index: 9999; } /* Transition presets */ .cx-transition-fast { transition: all 0.1s ease; } .cx-transition-normal { transition: all 0.2s ease; } .cx-transition-slow { transition: all 0.4s ease; } .cx-transition-spring { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .cx-transition-bounce { transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* Cursor utilities */ .cx-cursor-grab { cursor: grab; } .cx-cursor-grabbing { cursor: grabbing; } .cx-cursor-zoom-in { cursor: zoom-in; } .cx-cursor-help { cursor: help; } .cx-cursor-crosshair { cursor: crosshair; } /* Blend modes */ .cx-blend-overlay { mix-blend-mode: overlay; } .cx-blend-screen { mix-blend-mode: screen; } .cx-blend-multiply { mix-blend-mode: multiply; } /* Ring focus variants */ .cx-focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.4); } .cx-focus-ring-cyan:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.4); } .cx-focus-ring-green:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4); } /* ═══════════════════════════════════════════════════════════════════ BEAUTY, DEPTH & PERFORMANCE LAYER Glass morphism · Gradient mesh · Elevation · Ambient glow Micro-animations · Gradient borders · Loading · Text · Patterns ═══════════════════════════════════════════════════════════════════ */ /* ─── 1. Glass Morphism Refinement ─── */ .cx-glass-ultra { background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(59, 130, 246, 0.05)); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(168, 85, 247, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .cx-glass-deep { background: rgba(3, 7, 18, 0.72); backdrop-filter: blur(24px) saturate(1.3) brightness(0.85); -webkit-backdrop-filter: blur(24px) saturate(1.3) brightness(0.85); border: 1px solid rgba(255, 255, 255, 0.04); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03); } .cx-glass-glow { background: rgba(10, 10, 18, 0.55); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(168, 85, 247, 0.25); box-shadow: 0 0 20px rgba(168, 85, 247, 0.08), 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(168, 85, 247, 0.06); } .cx-glass-frost { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(32px) saturate(1.2); -webkit-backdrop-filter: blur(32px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* ─── 2. Gradient Mesh Backgrounds ─── */ @keyframes cx-mesh-drift { 0%, 100% { background-position: 0% 50%; } 25% { background-position: 100% 25%; } 50% { background-position: 50% 100%; } 75% { background-position: 25% 0%; } } .cx-mesh-bg { background: radial-gradient(ellipse at 20% 50%, rgba(168, 85, 247, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 50%); background-size: 200% 200%; animation: cx-mesh-drift 25s ease-in-out infinite; } .cx-mesh-card { background: radial-gradient(ellipse at 30% 0%, rgba(168, 85, 247, 0.06) 0%, transparent 60%), radial-gradient(ellipse at 70% 100%, rgba(59, 130, 246, 0.04) 0%, transparent 60%); background-size: 150% 150%; animation: cx-mesh-drift 18s ease-in-out infinite; } @keyframes cx-aurora-shift { 0%, 100% { background-position: 0% 50%; opacity: 0.6; } 33% { background-position: 50% 0%; opacity: 0.8; } 66% { background-position: 100% 50%; opacity: 0.5; } } .cx-aurora { position: relative; overflow: hidden; } .cx-aurora::before { content: ''; position: absolute; inset: -50%; background: linear-gradient( 135deg, rgba(168, 85, 247, 0.1) 0%, rgba(59, 130, 246, 0.08) 25%, rgba(6, 182, 212, 0.06) 50%, rgba(16, 185, 129, 0.05) 75%, rgba(168, 85, 247, 0.08) 100% ); background-size: 300% 300%; animation: cx-aurora-shift 20s ease-in-out infinite; pointer-events: none; z-index: 0; } .cx-aurora > * { position: relative; z-index: 1; } /* ─── 3. Depth & Elevation System ─── */ .cx-depth-0 { box-shadow: none; border: 1px solid transparent; } .cx-depth-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24); border: 1px solid rgba(255, 255, 255, 0.03); } .cx-depth-2 { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.04); } .cx-depth-3 { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(0, 0, 0, 0.24); border: 1px solid rgba(255, 255, 255, 0.05); } .cx-depth-4 { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36), 0 4px 8px rgba(0, 0, 0, 0.28), 0 0 1px rgba(168, 85, 247, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); } .cx-depth-5 { box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.32), 0 0 2px rgba(168, 85, 247, 0.08); border: 1px solid rgba(255, 255, 255, 0.07); } @keyframes cx-float-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .cx-float { animation: cx-float-hover 3s ease-in-out infinite; } .cx-sink:active { transform: translateY(1px) scale(0.98); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.1s ease, box-shadow 0.1s ease; } .cx-elevated { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 12px rgba(168, 85, 247, 0.06); transition: transform var(--cx-duration-slow) var(--cx-ease), box-shadow var(--cx-duration-slow) var(--cx-ease); } /* ─── 4. Ambient Glow Effects ─── */ @keyframes cx-glow-pulse-kf { 0%, 100% { box-shadow: 0 0 8px rgba(168, 85, 247, 0.1); } 50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.25), 0 0 40px rgba(168, 85, 247, 0.08); } } .cx-glow-pulse { animation: cx-glow-pulse-kf 3s ease-in-out infinite; } @keyframes cx-glow-breathe-kf { 0%, 100% { box-shadow: 0 0 12px rgba(168, 85, 247, 0.06), 0 0 4px rgba(168, 85, 247, 0.08); } 50% { box-shadow: 0 0 24px rgba(168, 85, 247, 0.14), 0 0 8px rgba(168, 85, 247, 0.12); } } .cx-glow-breathe-ambient { animation: cx-glow-breathe-kf 4s ease-in-out infinite; } @keyframes cx-glow-ring-kf { 0%, 100% { box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15), 0 0 12px rgba(168, 85, 247, 0.08); } 50% { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25), 0 0 20px rgba(168, 85, 247, 0.15); } } .cx-glow-ring { border-radius: 50%; animation: cx-glow-ring-kf 3s ease-in-out infinite; } .cx-neon-text { color: var(--cx-purple-300); text-shadow: 0 0 7px rgba(168, 85, 247, 0.6), 0 0 20px rgba(168, 85, 247, 0.3), 0 0 40px rgba(168, 85, 247, 0.15); } .cx-neon-border { border: 1px solid rgba(168, 85, 247, 0.5); box-shadow: 0 0 6px rgba(168, 85, 247, 0.25), 0 0 16px rgba(168, 85, 247, 0.1), inset 0 0 6px rgba(168, 85, 247, 0.06); } /* ─── 5. Smooth Micro-Animations ─── */ .cx-hover-lift { transition: transform var(--cx-duration) var(--cx-ease), box-shadow var(--cx-duration) var(--cx-ease); } .cx-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 8px rgba(168, 85, 247, 0.06); } .cx-hover-scale { transition: transform var(--cx-duration) var(--cx-ease); } .cx-hover-scale:hover { transform: scale(1.02); } .cx-hover-glow { transition: box-shadow var(--cx-duration-slow) var(--cx-ease); } .cx-hover-glow:hover { box-shadow: 0 0 16px rgba(168, 85, 247, 0.2), 0 0 32px rgba(168, 85, 247, 0.08); } .cx-hover-shine { position: relative; overflow: hidden; } .cx-hover-shine::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient( 105deg, transparent 40%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.04) 55%, transparent 60% ); transform: translateX(-100%); transition: none; pointer-events: none; } .cx-hover-shine:hover::after { transform: translateX(350%); transition: transform 0.6s ease; } @keyframes cx-ripple-effect { 0% { transform: scale(0); opacity: 0.4; } 100% { transform: scale(4); opacity: 0; } } .cx-click-ripple { position: relative; overflow: hidden; } .cx-click-ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: rgba(168, 85, 247, 0.3); transform: scale(0); opacity: 0; pointer-events: none; } .cx-click-ripple:active::after { animation: cx-ripple-effect 0.5s ease-out; } @keyframes cx-appear-kf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .cx-appear { animation: cx-appear-kf 0.5s var(--cx-ease) both; } .cx-appear-delay-1 { animation-delay: 0.1s; } .cx-appear-delay-2 { animation-delay: 0.2s; } .cx-appear-delay-3 { animation-delay: 0.3s; } .cx-appear-delay-4 { animation-delay: 0.4s; } /* ─── 6. Gradient Border System ─── */ .cx-border-gradient { position: relative; border: none; background-clip: padding-box; } .cx-border-gradient::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient( 135deg, rgba(168, 85, 247, 0.5), rgba(59, 130, 246, 0.3), rgba(6, 182, 212, 0.3), rgba(168, 85, 247, 0.5) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } @keyframes cx-shimmer-border { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .cx-border-shimmer { position: relative; border: none; } .cx-border-shimmer::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient( 90deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.5), rgba(192, 132, 252, 0.6), rgba(168, 85, 247, 0.5), rgba(168, 85, 247, 0.15) ); background-size: 200% 100%; animation: cx-shimmer-border 3s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } @keyframes cx-rainbow-cycle { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } .cx-border-rainbow { position: relative; border: none; } .cx-border-rainbow::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient( 90deg, rgba(168, 85, 247, 0.5), rgba(59, 130, 246, 0.5), rgba(6, 182, 212, 0.5), rgba(16, 185, 129, 0.5), rgba(250, 204, 21, 0.4), rgba(168, 85, 247, 0.5) ); background-size: 300% 100%; animation: cx-rainbow-cycle 6s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ─── 7. Skeleton & Loading States ─── */ @keyframes cx-wave-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .cx-skeleton-wave { background: linear-gradient( 90deg, var(--cx-bg-surface) 0%, var(--cx-bg-raised) 20%, rgba(168, 85, 247, 0.06) 40%, var(--cx-bg-raised) 60%, var(--cx-bg-surface) 100% ); background-size: 200% 100%; animation: cx-wave-shimmer 2s ease-in-out infinite; border-radius: var(--cx-radius-sm); } @keyframes cx-skeleton-pulse-kf { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } .cx-skeleton-glow { background: var(--cx-bg-raised); animation: cx-skeleton-pulse-kf 1.8s ease-in-out infinite; border-radius: var(--cx-radius-sm); } @keyframes cx-dots-bounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } .cx-loading-dots { display: inline-flex; align-items: center; gap: 4px; } .cx-loading-dots::before, .cx-loading-dots::after, .cx-loading-dots span { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-accent); animation: cx-dots-bounce 1.2s ease-in-out infinite; } .cx-loading-dots span { content: none; } .cx-loading-dots::after { animation-delay: 0.16s; } .cx-loading-dots span { animation-delay: 0.32s; } @keyframes cx-loading-bar-kf { 0% { transform: translateX(-100%); } 50% { transform: translateX(0%); } 100% { transform: translateX(100%); } } .cx-loading-bar { position: relative; height: 3px; width: 100%; background: var(--cx-bg-raised); border-radius: 2px; overflow: hidden; } .cx-loading-bar::after { content: ''; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--cx-accent), transparent); border-radius: 2px; animation: cx-loading-bar-kf 1.5s ease-in-out infinite; } /* ─── 8. CSS Performance Containment ─── */ .cx-card, .cx-card-base, .cx-panel, .cx-stat-card { contain: layout style; } .cx-sidebar { contain: layout style; } .cx-hover-lift, .cx-hover-scale, .cx-float, .cx-elevated { will-change: transform; } .cx-glow-pulse, .cx-glow-breathe-ambient, .cx-glow-ring { will-change: box-shadow; } .cx-mesh-bg, .cx-mesh-card, .cx-aurora::before { will-change: background-position; } /* ─── 9. Enhanced Text Styles ─── */ .cx-text-gradient { background: linear-gradient( 135deg, var(--cx-purple-300) 0%, var(--cx-purple-400) 30%, #60a5fa 60%, #22d3ee 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @keyframes cx-text-shimmer-kf { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .cx-text-shimmer { background: linear-gradient( 90deg, var(--cx-purple-300) 0%, var(--cx-purple-100) 25%, #60a5fa 50%, var(--cx-purple-100) 75%, var(--cx-purple-300) 100% ); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: cx-text-shimmer-kf 4s linear infinite; } @keyframes cx-text-glow-kf { 0%, 100% { text-shadow: 0 0 4px rgba(168, 85, 247, 0.2); } 50% { text-shadow: 0 0 12px rgba(168, 85, 247, 0.5), 0 0 24px rgba(168, 85, 247, 0.15); } } .cx-text-glow-pulse { color: var(--cx-purple-200); animation: cx-text-glow-kf 3s ease-in-out infinite; } @keyframes cx-typewriter-kf { from { width: 0; } to { width: 100%; } } @keyframes cx-blink-cursor { 0%, 100% { border-color: transparent; } 50% { border-color: var(--cx-accent); } } .cx-text-typewriter { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--cx-accent); width: 0; animation: cx-typewriter-kf 2.5s steps(40) forwards, cx-blink-cursor 0.75s step-end infinite; } /* ─── 10. Surface Patterns ─── */ .cx-pattern-dots { background-image: radial-gradient( circle, rgba(168, 85, 247, 0.08) 1px, transparent 1px ); background-size: 20px 20px; } .cx-pattern-grid { background-image: linear-gradient(rgba(168, 85, 247, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 85, 247, 0.05) 1px, transparent 1px); background-size: 32px 32px; } .cx-pattern-circuit { background-image: linear-gradient(rgba(168, 85, 247, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 85, 247, 0.04) 1px, transparent 1px), radial-gradient(circle 2px, rgba(168, 85, 247, 0.1) 1px, transparent 1.5px); background-size: 40px 40px, 40px 40px, 40px 40px; background-position: 0 0, 0 0, 20px 20px; } .cx-pattern-noise { position: relative; } .cx-pattern-noise::after { content: ''; position: absolute; inset: 0; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 150px 150px; pointer-events: none; border-radius: inherit; z-index: 1; } .cx-pattern-noise > * { position: relative; z-index: 2; } /* ═══════════════════════════════════════════════════════════════════════════════ REVOLUTION: Z-Template Advanced Design System Extensions ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══ REVOLUTION: Compact Component System ═══ */ /* Ultra-compact stat card - horizontal layout */ .cx-stat-compact { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--cx-bg-surface); border: 1px solid rgba(139, 92, 246, 0.1); border-radius: var(--cx-radius-md); transition: all 0.2s var(--cx-spring-snappy); container-type: inline-size; } .cx-stat-compact:hover { border-color: rgba(139, 92, 246, 0.25); background: rgba(17, 24, 39, 0.9); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(139, 92, 246, 0.08); } .cx-stat-compact-icon { width: 1.75rem; height: 1.75rem; border-radius: var(--cx-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0; } .cx-stat-compact-value { font-size: var(--cx-type-md); font-weight: 700; line-height: 1; color: var(--cx-purple-200); letter-spacing: -0.02em; } .cx-stat-compact-label { font-size: var(--cx-type-xs); color: var(--cx-text-muted); line-height: 1.1; white-space: nowrap; } .cx-stat-compact-info { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } .cx-stat-compact-trend { font-size: 0.5625rem; font-weight: 600; padding: 0.0625rem 0.25rem; border-radius: 0.25rem; margin-left: auto; flex-shrink: 0; } /* Micro card - minimal footprint */ .cx-micro-card { padding: 0.375rem 0.5rem; background: var(--cx-bg-surface); border: 1px solid rgba(139, 92, 246, 0.08); border-radius: var(--cx-radius-sm); font-size: var(--cx-type-xs); transition: all 0.15s var(--cx-spring-snappy); } .cx-micro-card:hover { border-color: rgba(139, 92, 246, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Compact repo card */ .cx-repo-compact { padding: 0.5rem 0.75rem; background: var(--cx-bg-surface); border: 1px solid rgba(139, 92, 246, 0.1); border-radius: var(--cx-radius-md); transition: all 0.2s var(--cx-spring-snappy); } .cx-repo-compact:hover { border-color: rgba(139, 92, 246, 0.3); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(139, 92, 246, 0.08); } /* Compact quick action */ .cx-action-compact { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem; background: var(--cx-bg-surface); border: 1px solid rgba(139, 92, 246, 0.08); border-radius: var(--cx-radius-sm); cursor: pointer; transition: all 0.15s var(--cx-spring-snappy); width: 100%; text-align: left; } .cx-action-compact:hover { border-color: rgba(139, 92, 246, 0.25); background: rgba(17, 24, 39, 0.9); } .cx-action-compact-icon { width: 1.5rem; height: 1.5rem; border-radius: 0.25rem; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; } /* ═══ REVOLUTION: Live & Streaming System ═══ */ /* Live breathing indicator */ @keyframes cx-live-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.6; } } @keyframes cx-live-ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } } .cx-live-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: cx-live-breathe 2s ease-in-out infinite; } .cx-live-dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid #22c55e; animation: cx-live-ring 2s ease-out infinite; } .cx-live-dot--warning { background: #f59e0b; } .cx-live-dot--warning::after { border-color: #f59e0b; } .cx-live-dot--error { background: #ef4444; } .cx-live-dot--error::after { border-color: #ef4444; } .cx-live-dot--purple { background: var(--cx-purple-400); } .cx-live-dot--purple::after { border-color: var(--cx-purple-400); } /* Streaming text cursor */ @keyframes cx-cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes cx-cursor-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 4px currentColor; } 50% { opacity: 0.4; box-shadow: none; } } .cx-stream-cursor { display: inline-block; width: 2px; height: 1em; background: var(--cx-purple-400); margin-left: 1px; animation: cx-cursor-blink 1s step-end infinite; vertical-align: text-bottom; } .cx-stream-cursor--block { width: 0.6em; background: rgba(168, 85, 247, 0.5); animation: cx-cursor-pulse 1.2s ease-in-out infinite; } /* Stream text fade-in per character */ @keyframes cx-char-appear { from { opacity: 0; filter: blur(2px); transform: translateY(2px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } .cx-stream-char { display: inline; animation: cx-char-appear 0.15s var(--cx-spring-smooth) forwards; opacity: 0; } /* Signal bars */ .cx-signal-bars { display: flex; align-items: flex-end; gap: 1.5px; height: 12px; } .cx-signal-bar { width: 3px; border-radius: 1px; background: rgba(139, 92, 246, 0.2); transition: all 0.3s var(--cx-spring-smooth); } .cx-signal-bar--active { background: #22c55e; } .cx-signal-bar--warning { background: #f59e0b; } .cx-signal-bar--error { background: #ef4444; } .cx-signal-bar:nth-child(1) { height: 25%; } .cx-signal-bar:nth-child(2) { height: 50%; } .cx-signal-bar:nth-child(3) { height: 75%; } .cx-signal-bar:nth-child(4) { height: 100%; } /* Pulse ring effect */ @keyframes cx-pulse-ring-expand { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } } .cx-pulse-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; } .cx-pulse-ring::before, .cx-pulse-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cx-purple-400); animation: cx-pulse-ring-expand 2s ease-out infinite; } .cx-pulse-ring::after { animation-delay: 1s; } /* Streaming progress bar */ @keyframes cx-stream-progress { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .cx-stream-progress { height: 2px; background: linear-gradient(90deg, transparent 0%, var(--cx-purple-500) 50%, transparent 100%); background-size: 200% 100%; animation: cx-stream-progress 2s linear infinite; border-radius: 1px; } /* Data ticker */ @keyframes cx-ticker-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } .cx-data-ticker { overflow: hidden; mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); } .cx-data-ticker-inner { animation: cx-ticker-scroll var(--cx-ticker-speed, 20s) linear infinite; } /* Live counter flip */ @keyframes cx-counter-flip-in { from { transform: rotateX(-90deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } } @keyframes cx-counter-flip-out { from { transform: rotateX(0); opacity: 1; } to { transform: rotateX(90deg); opacity: 0; } } .cx-counter-digit { display: inline-block; perspective: 100px; } .cx-counter-digit-enter { animation: cx-counter-flip-in 0.4s var(--cx-spring-smooth) forwards; } .cx-counter-digit-exit { animation: cx-counter-flip-out 0.2s ease-in forwards; } /* ═══ REVOLUTION: Modern Animation Engine ═══ */ /* Magnetic hover — container that pulls child toward cursor */ .cx-magnetic { transition: transform 0.3s var(--cx-spring-smooth); } /* Spring scale — bouncy feedback */ .cx-spring-press { transition: transform 0.25s var(--cx-spring-bouncy); } .cx-spring-press:active { transform: scale(0.95); } /* Fluid morph transitions */ @keyframes cx-morph-blob { 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 25% { border-radius: 58% 42% 52% 48% / 35% 55% 45% 65%; } 50% { border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; } 75% { border-radius: 42% 58% 65% 35% / 45% 60% 40% 55%; } 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } } .cx-morph { animation: cx-morph-blob 8s ease-in-out infinite; } /* Stagger cascade */ .cx-stagger > * { opacity: 0; transform: translateY(8px); animation: cx-stagger-in 0.4s var(--cx-spring-smooth) forwards; } @keyframes cx-stagger-in { to { opacity: 1; transform: translateY(0); } } .cx-stagger > *:nth-child(1) { animation-delay: 0.02s; } .cx-stagger > *:nth-child(2) { animation-delay: 0.04s; } .cx-stagger > *:nth-child(3) { animation-delay: 0.06s; } .cx-stagger > *:nth-child(4) { animation-delay: 0.08s; } .cx-stagger > *:nth-child(5) { animation-delay: 0.10s; } .cx-stagger > *:nth-child(6) { animation-delay: 0.12s; } .cx-stagger > *:nth-child(7) { animation-delay: 0.14s; } .cx-stagger > *:nth-child(8) { animation-delay: 0.16s; } .cx-stagger > *:nth-child(9) { animation-delay: 0.18s; } .cx-stagger > *:nth-child(10) { animation-delay: 0.20s; } .cx-stagger > *:nth-child(n+11) { animation-delay: 0.22s; } /* Scroll-linked reveal */ @keyframes cx-scroll-reveal { from { opacity: 0; transform: translateY(20px) scale(0.98); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } .cx-scroll-reveal { animation: cx-scroll-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; } /* Glow trail effect on hover */ .cx-glow-trail { position: relative; overflow: hidden; } .cx-glow-trail::before { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.3s; } .cx-glow-trail:hover::before { opacity: 1; } /* Number count animation */ @keyframes cx-count-up { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } .cx-count-anim { display: inline-block; overflow: hidden; } .cx-count-anim > span { display: inline-block; animation: cx-count-up 0.5s var(--cx-spring-smooth) forwards; } /* Shimmer scan effect */ @keyframes cx-shimmer-scan { 0% { transform: translateX(-100%) skewX(-15deg); } 100% { transform: translateX(200%) skewX(-15deg); } } .cx-shimmer-scan { position: relative; overflow: hidden; } .cx-shimmer-scan::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent); animation: cx-shimmer-scan 3s ease-in-out infinite; } /* Entrance animations */ @keyframes cx-enter-scale { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes cx-enter-slide-up { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes cx-enter-slide-right { from { transform: translateX(-12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes cx-enter-blur { from { filter: blur(8px); opacity: 0; } to { filter: blur(0); opacity: 1; } } .cx-enter-scale { animation: cx-enter-scale 0.3s var(--cx-spring-snappy) forwards; } .cx-enter-up { animation: cx-enter-slide-up 0.3s var(--cx-spring-snappy) forwards; } .cx-enter-right { animation: cx-enter-slide-right 0.3s var(--cx-spring-snappy) forwards; } .cx-enter-blur { animation: cx-enter-blur 0.4s ease-out forwards; } /* ═══ REVOLUTION: Advanced Typography ═══ */ .cx-fluid-xs { font-size: var(--cx-type-xs); } .cx-fluid-sm { font-size: var(--cx-type-sm); } .cx-fluid-base { font-size: var(--cx-type-base); } .cx-fluid-md { font-size: var(--cx-type-md); } .cx-fluid-lg { font-size: var(--cx-type-lg); } .cx-fluid-xl { font-size: var(--cx-type-xl); } .cx-fluid-2xl { font-size: var(--cx-type-2xl); } .cx-fluid-hero { font-size: var(--cx-type-hero); } /* Tabular numbers for data */ .cx-tabular { font-variant-numeric: tabular-nums; } .cx-oldstyle { font-variant-numeric: oldstyle-nums; } .cx-lining { font-variant-numeric: lining-nums; } /* Tracking utilities */ .cx-track-tight { letter-spacing: -0.03em; } .cx-track-tighter { letter-spacing: -0.05em; } .cx-track-wide { letter-spacing: 0.05em; } .cx-track-wider { letter-spacing: 0.1em; } /* Modern text rendering */ .cx-text-sharp { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; } .cx-text-balanced { text-wrap: balance; } .cx-text-pretty { text-wrap: pretty; } /* Gradient text helper */ .cx-text-gradient { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cx-text-gradient-purple { background-image: linear-gradient(135deg, var(--cx-purple-300), var(--cx-purple-500)); } .cx-text-gradient-rainbow { background-image: linear-gradient(135deg, #c084fc, #60a5fa, #34d399, #fbbf24); } .cx-text-gradient-fire { background-image: linear-gradient(135deg, #fbbf24, #f97316, #ef4444); } .cx-text-gradient-ocean { background-image: linear-gradient(135deg, #22d3ee, #6366f1); } /* Truncation with fade */ .cx-truncate-fade { position: relative; overflow: hidden; white-space: nowrap; } .cx-truncate-fade::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2rem; background: linear-gradient(to right, transparent, var(--cx-bg-surface)); pointer-events: none; } /* ═══ REVOLUTION: Touch & Selection ═══ */ /* Custom text selection */ ::selection { background: rgba(139, 92, 246, 0.35); color: #f3e8ff; } /* Touch action zones */ .cx-touch-pan { touch-action: pan-y; } .cx-touch-none { touch-action: none; } .cx-touch-pinch { touch-action: pinch-zoom; } /* Improved tap targets */ .cx-tap-target { position: relative; min-width: 44px; min-height: 44px; } .cx-tap-target::before { content: ''; position: absolute; inset: -8px; } /* Haptic feedback visual (for touch press) */ @keyframes cx-haptic { 0% { transform: scale(1); } 50% { transform: scale(0.97); } 100% { transform: scale(1); } } .cx-haptic:active { animation: cx-haptic 0.15s ease-out; } /* Overscroll customization */ .cx-overscroll-glow { overscroll-behavior: contain; } /* Long press indicator */ @keyframes cx-long-press { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } /* Drag handle styling */ .cx-drag-handle { cursor: grab; touch-action: none; user-select: none; } .cx-drag-handle:active { cursor: grabbing; } /* Inertial scroll container */ .cx-scroll-inertia { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scroll-snap-type: y proximity; } .cx-scroll-snap-item { scroll-snap-align: start; } /* Focus visible ring (keyboard only) */ .cx-focus-ring:focus-visible { outline: 2px solid var(--cx-purple-400); outline-offset: 2px; border-radius: var(--cx-radius-sm); } /* ═══ REVOLUTION: Container Query Adaptive Sizing ═══ */ /* All major components become container-query aware */ .cx-stat-compact, .cx-micro-card, .cx-repo-compact, .cx-card, .cx-panel { container-type: inline-size; } /* Ultra-small container: collapse to minimal */ @container (max-width: 120px) { .cx-stat-compact { padding: 0.25rem 0.375rem; gap: 0.25rem; } .cx-stat-compact-icon { width: 1rem; height: 1rem; font-size: 0.5rem; } .cx-stat-compact-value { font-size: var(--cx-type-xs); } .cx-stat-compact-label { display: none; } .cx-stat-compact-trend { display: none; } } /* Small stat: keep label but compact */ @container (max-width: 200px) { .cx-stat-compact { padding: 0.375rem 0.5rem; gap: 0.375rem; } .cx-stat-compact-icon { width: 1.25rem; height: 1.25rem; font-size: 0.625rem; } .cx-stat-compact-value { font-size: var(--cx-type-sm); } .cx-stat-compact-label { font-size: 0.5625rem; } .cx-stat-compact-trend { font-size: 0.5rem; padding: 0 0.1875rem; } } /* Cards in tight spaces */ @container (max-width: 200px) { .cx-repo-compact .cx-badge { display: none; } .cx-repo-compact .cx-btn { padding: 0.125rem 0.375rem; font-size: 0.5625rem; } } /* Panels in tight spaces */ @container (max-width: 300px) { .cx-panel-header { padding: 0.375rem 0.5rem; } .cx-panel-body { padding: 0.375rem 0.5rem; } .cx-panel-title { font-size: var(--cx-type-xs); } } /* Wide container - horizontal layouts */ @container (min-width: 500px) { .cx-stat-row { display: flex; gap: 0.5rem; } .cx-stat-row > * { flex: 1; } } /* ═══ REVOLUTION: Advanced Grid Layouts ═══ */ .cx-grid-masonry { columns: 3; column-gap: 0.75rem; } .cx-grid-masonry > * { break-inside: avoid; margin-bottom: 0.75rem; } @media (max-width: 768px) { .cx-grid-masonry { columns: 2; } } @media (max-width: 480px) { .cx-grid-masonry { columns: 1; } } .cx-grid-auto-fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; } .cx-grid-auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; } .cx-grid-dense { grid-auto-flow: dense; } /* ═══ REVOLUTION: Scrollbar Styling ═══ */ .cx-scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; } .cx-scrollbar-thin::-webkit-scrollbar-track { background: transparent; } .cx-scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.2); border-radius: 2px; } .cx-scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.4); } .cx-scrollbar-none::-webkit-scrollbar { display: none; } .cx-scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; } /* ═══ REVOLUTION: Focus & Interaction States ═══ */ .cx-focus-ring:focus-visible { outline: 2px solid rgba(139, 92, 246, 0.5); outline-offset: 2px; border-radius: var(--cx-radius-sm); } .cx-focus-glow:focus-visible { box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3), 0 0 16px rgba(139, 92, 246, 0.15); outline: none; } .cx-active-scale:active { transform: scale(0.97); } .cx-active-dim:active { opacity: 0.85; } /* ═══ REVOLUTION: Text Truncation ═══ */ .cx-truncate-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx-truncate-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cx-truncate-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* ═══ REVOLUTION: Aspect Ratio Cards ═══ */ .cx-aspect-square { aspect-ratio: 1/1; } .cx-aspect-video { aspect-ratio: 16/9; } .cx-aspect-photo { aspect-ratio: 4/3; } .cx-aspect-golden { aspect-ratio: 1.618/1; } /* ═══ REVOLUTION: Animated Borders ═══ */ @keyframes cx-border-spin { to { --cx-border-angle: 360deg; } } .cx-border-animated { position: relative; border: 1px solid transparent; border-radius: var(--cx-radius-md); background: linear-gradient(var(--cx-bg-surface), var(--cx-bg-surface)) padding-box, conic-gradient(from var(--cx-border-angle, 0deg), #a855f7, #06b6d4, #10b981, #a855f7) border-box; animation: cx-border-spin 4s linear infinite; } @property --cx-border-angle { syntax: ''; initial-value: 0deg; inherits: false; } /* ═══ REVOLUTION: Backdrop Filters ═══ */ .cx-backdrop-blur-sm { backdrop-filter: blur(4px); } .cx-backdrop-blur-md { backdrop-filter: blur(8px); } .cx-backdrop-blur-lg { backdrop-filter: blur(16px); } .cx-backdrop-blur-xl { backdrop-filter: blur(24px); } .cx-backdrop-saturate { backdrop-filter: saturate(180%); } .cx-backdrop-frost { backdrop-filter: blur(12px) saturate(150%); background: rgba(3, 7, 18, 0.7); } /* ═══ REVOLUTION: Card Hover Effects ═══ */ .cx-hover-glow:hover { box-shadow: 0 0 20px rgba(139, 92, 246, 0.15), 0 0 40px rgba(139, 92, 246, 0.05); } .cx-hover-border:hover { border-color: rgba(139, 92, 246, 0.4) !important; } .cx-hover-scale:hover { transform: scale(1.02); } .cx-hover-scale-sm:hover { transform: scale(1.005); } .cx-hover-bright:hover { filter: brightness(1.1); } .cx-hover-translate-y:hover { transform: translateY(-2px); } /* ═══ REVOLUTION: Skeleton Animations ═══ */ @keyframes cx-skeleton-wave { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .cx-skeleton { background: linear-gradient(90deg, rgba(139, 92, 246, 0.05) 25%, rgba(139, 92, 246, 0.1) 50%, rgba(139, 92, 246, 0.05) 75%); background-size: 200% 100%; animation: cx-skeleton-wave 1.5s ease-in-out infinite; border-radius: var(--cx-radius-sm); } /* ═══ REVOLUTION: Z-Index Scale ═══ */ .cx-z-base { z-index: 0; } .cx-z-dropdown { z-index: 1000; } .cx-z-sticky { z-index: 1100; } .cx-z-modal-backdrop { z-index: 1200; } .cx-z-modal { z-index: 1300; } .cx-z-popover { z-index: 1400; } .cx-z-tooltip { z-index: 1500; } .cx-z-toast { z-index: 1600; } /* ═══ REVOLUTION: Print Utilities ═══ */ @media print { .cx-print-hidden { display: none !important; } .cx-print-only { display: block !important; } .cx-print-break-before { page-break-before: always; } .cx-print-break-after { page-break-after: always; } } /* ═══ REVOLUTION: State Colors ═══ */ .cx-bg-success { background: rgba(16, 185, 129, 0.1); } .cx-bg-warning { background: rgba(245, 158, 11, 0.1); } .cx-bg-danger { background: rgba(239, 68, 68, 0.1); } .cx-bg-info { background: rgba(59, 130, 246, 0.1); } .cx-border-success { border-color: rgba(16, 185, 129, 0.3); } .cx-border-warning { border-color: rgba(245, 158, 11, 0.3); } .cx-border-danger { border-color: rgba(239, 68, 68, 0.3); } .cx-border-info { border-color: rgba(59, 130, 246, 0.3); } .cx-text-success { color: #10b981; } .cx-text-warning { color: #f59e0b; } .cx-text-danger { color: #ef4444; } .cx-text-info { color: #3b82f6; } /* ═══ REVOLUTION: Shimmer Loading ═══ */ @keyframes cx-shimmer-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .cx-shimmer { position: relative; overflow: hidden; } .cx-shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.08), transparent); animation: cx-shimmer-slide 2s ease-in-out infinite; } /* ═══ CREATIVE: Neumorphism System ═══ */ .cx-neu { background: #111827; box-shadow: 8px 8px 16px rgba(0,0,0,0.4), -8px -8px 16px rgba(31,41,55,0.3); border-radius: var(--cx-radius-lg); } .cx-neu-inset { background: #111827; box-shadow: inset 4px 4px 8px rgba(0,0,0,0.4), inset -4px -4px 8px rgba(31,41,55,0.3); border-radius: var(--cx-radius-lg); } .cx-neu-flat { background: linear-gradient(145deg, #0f1521, #131b2d); box-shadow: 5px 5px 10px rgba(0,0,0,0.3), -5px -5px 10px rgba(31,41,55,0.2); border-radius: var(--cx-radius-md); } .cx-neu-btn { background: linear-gradient(145deg, #131b2d, #0f1521); box-shadow: 4px 4px 8px rgba(0,0,0,0.35), -4px -4px 8px rgba(31,41,55,0.25); border-radius: var(--cx-radius-md); cursor: pointer; transition: all 0.15s; } .cx-neu-btn:active { box-shadow: inset 3px 3px 6px rgba(0,0,0,0.4), inset -3px -3px 6px rgba(31,41,55,0.25); } /* ═══ CREATIVE: 3D Transform System ═══ */ .cx-perspective { perspective: 1000px; } .cx-perspective-sm { perspective: 500px; } .cx-perspective-lg { perspective: 2000px; } .cx-preserve-3d { transform-style: preserve-3d; } .cx-backface-hidden { backface-visibility: hidden; } .cx-rotate-x-5 { transform: rotateX(5deg); } .cx-rotate-y-5 { transform: rotateY(5deg); } .cx-rotate-x-15 { transform: rotateX(15deg); } .cx-rotate-y-15 { transform: rotateY(15deg); } .cx-translate-z-10 { transform: translateZ(10px); } .cx-translate-z-20 { transform: translateZ(20px); } .cx-translate-z-50 { transform: translateZ(50px); } .cx-flip-x { transform: rotateX(180deg); } .cx-flip-y { transform: rotateY(180deg); } /* ═══ CREATIVE: Glitch Effect ═══ */ @keyframes cx-glitch-1 { 0%, 100% { clip-path: inset(0 0 95% 0); transform: translate(0); } 20% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 2px); } 40% { clip-path: inset(40% 0 30% 0); transform: translate(3px, -1px); } 60% { clip-path: inset(60% 0 10% 0); transform: translate(-2px, 1px); } 80% { clip-path: inset(10% 0 70% 0); transform: translate(2px, -2px); } } @keyframes cx-glitch-2 { 0%, 100% { clip-path: inset(95% 0 0 0); transform: translate(0); } 20% { clip-path: inset(60% 0 20% 0); transform: translate(3px, -2px); } 40% { clip-path: inset(30% 0 40% 0); transform: translate(-3px, 1px); } 60% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -1px); } 80% { clip-path: inset(70% 0 10% 0); transform: translate(-2px, 2px); } } .cx-glitch { position: relative; display: inline-block; } .cx-glitch::before, .cx-glitch::after { content: attr(data-text); position: absolute; inset: 0; } .cx-glitch::before { color: #06b6d4; animation: cx-glitch-1 2s infinite linear alternate-reverse; z-index: -1; } .cx-glitch::after { color: #f43f5e; animation: cx-glitch-2 2s infinite linear alternate-reverse; z-index: -1; } .cx-glitch-intense::before { animation-duration: 0.5s; } .cx-glitch-intense::after { animation-duration: 0.5s; } .cx-glitch-subtle::before { animation-duration: 4s; opacity: 0.5; } .cx-glitch-subtle::after { animation-duration: 4s; opacity: 0.5; } /* ═══ CREATIVE: Neon Glow System ═══ */ .cx-neon-purple { text-shadow: 0 0 7px #a855f7, 0 0 10px #a855f7, 0 0 21px #a855f7, 0 0 42px #7c3aed, 0 0 82px #7c3aed; color: #e9d5ff; } .cx-neon-cyan { text-shadow: 0 0 7px #06b6d4, 0 0 10px #06b6d4, 0 0 21px #06b6d4, 0 0 42px #0891b2, 0 0 82px #0891b2; color: #cffafe; } .cx-neon-green { text-shadow: 0 0 7px #10b981, 0 0 10px #10b981, 0 0 21px #10b981, 0 0 42px #059669, 0 0 82px #059669; color: #d1fae5; } .cx-neon-red { text-shadow: 0 0 7px #ef4444, 0 0 10px #ef4444, 0 0 21px #ef4444, 0 0 42px #dc2626, 0 0 82px #dc2626; color: #fee2e2; } .cx-neon-gold { text-shadow: 0 0 7px #f59e0b, 0 0 10px #f59e0b, 0 0 21px #f59e0b, 0 0 42px #d97706, 0 0 82px #d97706; color: #fef3c7; } .cx-neon-pink { text-shadow: 0 0 7px #ec4899, 0 0 10px #ec4899, 0 0 21px #ec4899, 0 0 42px #db2777, 0 0 82px #db2777; color: #fce7f3; } @keyframes cx-neon-flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.4; } } .cx-neon-flicker { animation: cx-neon-flicker 3s infinite; } /* Neon box glow */ .cx-neon-box-purple { box-shadow: 0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 20px rgba(168,85,247,0.3), inset 0 0 10px rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.4); } .cx-neon-box-cyan { box-shadow: 0 0 5px #06b6d4, 0 0 10px #06b6d4, 0 0 20px rgba(6,182,212,0.3), inset 0 0 10px rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.4); } .cx-neon-box-green { box-shadow: 0 0 5px #10b981, 0 0 10px #10b981, 0 0 20px rgba(16,185,129,0.3), inset 0 0 10px rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.4); } /* ═══ CREATIVE: Holographic & Iridescent ═══ */ @keyframes cx-holo-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .cx-holographic { background: linear-gradient(135deg, #a855f7, #06b6d4, #10b981, #f59e0b, #ec4899, #a855f7); background-size: 400% 400%; animation: cx-holo-shift 6s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cx-holographic-bg { background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(6,182,212,0.15), rgba(16,185,129,0.15), rgba(245,158,11,0.15), rgba(236,72,153,0.15)); background-size: 400% 400%; animation: cx-holo-shift 8s ease infinite; } .cx-iridescent { background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%); background-size: 300% 300%; animation: cx-holo-shift 5s ease infinite; } /* ═══ CREATIVE: Clip-Path Shapes ═══ */ .cx-clip-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .cx-clip-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } .cx-clip-octagon { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } .cx-clip-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .cx-clip-cross { clip-path: polygon(33% 0%, 67% 0%, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0% 67%, 0% 33%, 33% 33%); } .cx-clip-arrow-right { clip-path: polygon(0% 20%, 75% 20%, 75% 0%, 100% 50%, 75% 100%, 75% 80%, 0% 80%); } .cx-clip-chevron { clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%); } .cx-clip-circle { clip-path: circle(50% at 50% 50%); } .cx-clip-blob { clip-path: polygon(30% 0%, 70% 0%, 95% 20%, 100% 55%, 85% 85%, 55% 100%, 20% 95%, 0% 65%, 5% 30%); } .cx-clip-wave-top { clip-path: polygon(0 20%, 5% 15%, 10% 20%, 15% 12%, 20% 20%, 25% 15%, 30% 18%, 35% 10%, 40% 18%, 45% 15%, 50% 20%, 55% 12%, 60% 18%, 65% 15%, 70% 20%, 75% 12%, 80% 18%, 85% 15%, 90% 20%, 95% 12%, 100% 18%, 100% 100%, 0 100%); } /* ═══ CREATIVE: Cursor Styles ═══ */ .cx-cursor-pointer { cursor: pointer; } .cx-cursor-grab { cursor: grab; } .cx-cursor-grab:active { cursor: grabbing; } .cx-cursor-crosshair { cursor: crosshair; } .cx-cursor-cell { cursor: cell; } .cx-cursor-none { cursor: none; } .cx-cursor-help { cursor: help; } .cx-cursor-not-allowed { cursor: not-allowed; } /* ═══ CREATIVE: Text Masks & Clipping ═══ */ .cx-text-mask-purple { background: linear-gradient(135deg, #a855f7, #c084fc, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cx-text-mask-cyber { background: linear-gradient(135deg, #06b6d4, #a855f7, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cx-text-mask-fire { background: linear-gradient(135deg, #ef4444, #f59e0b, #eab308); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cx-text-mask-ocean { background: linear-gradient(135deg, #0ea5e9, #06b6d4, #14b8a6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cx-text-mask-aurora { background: linear-gradient(135deg, #10b981, #06b6d4, #a855f7, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ═══ CREATIVE: Blend Mode Utilities ═══ */ .cx-blend-multiply { mix-blend-mode: multiply; } .cx-blend-screen { mix-blend-mode: screen; } .cx-blend-overlay { mix-blend-mode: overlay; } .cx-blend-difference { mix-blend-mode: difference; } .cx-blend-luminosity { mix-blend-mode: luminosity; } /* ═══ CREATIVE: Scroll Snap ═══ */ .cx-snap-x { scroll-snap-type: x mandatory; overflow-x: auto; display: flex; gap: 0.75rem; } .cx-snap-y { scroll-snap-type: y mandatory; overflow-y: auto; } .cx-snap-child { scroll-snap-align: start; flex-shrink: 0; } .cx-snap-center { scroll-snap-align: center; flex-shrink: 0; } /* ═══ CREATIVE: Advanced Animations ═══ */ @keyframes cx-spin-slow { to { transform: rotate(360deg); } } @keyframes cx-ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes cx-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } 75% { transform: rotate(1deg); } } @keyframes cx-rubber { 0% { transform: scale(1); } 30% { transform: scaleX(1.25) scaleY(0.75); } 40% { transform: scaleX(0.75) scaleY(1.25); } 50% { transform: scaleX(1.15) scaleY(0.85); } 65% { transform: scaleX(0.95) scaleY(1.05); } 100% { transform: scale(1); } } @keyframes cx-jelly { 0% { transform: scale(1, 1); } 25% { transform: scale(0.9, 1.1); } 50% { transform: scale(1.1, 0.9); } 75% { transform: scale(0.95, 1.05); } 100% { transform: scale(1, 1); } } @keyframes cx-tada { 0% { transform: scale(1) rotate(0); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } @keyframes cx-flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes cx-typewriter-cursor { 0%, 100% { border-color: transparent; } 50% { border-color: currentColor; } } @keyframes cx-ripple { 0% { transform: scale(0); opacity: 0.5; } 100% { transform: scale(4); opacity: 0; } } .cx-animate-spin-slow { animation: cx-spin-slow 3s linear infinite; } .cx-animate-ping { animation: cx-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } .cx-animate-wiggle { animation: cx-wiggle 1s ease-in-out infinite; } .cx-animate-rubber { animation: cx-rubber 0.8s ease; } .cx-animate-jelly { animation: cx-jelly 0.6s ease; } .cx-animate-tada { animation: cx-tada 0.8s ease; } .cx-animate-flash { animation: cx-flash 1s ease infinite; } .cx-animate-ripple { animation: cx-ripple 0.6s ease-out; } /* ═══ CREATIVE: Gradient Borders (Animated) ═══ */ @keyframes cx-gradient-rotate { 0% { --cx-grad-angle: 0deg; } 100% { --cx-grad-angle: 360deg; } } @property --cx-grad-angle { syntax: ''; initial-value: 0deg; inherits: false; } .cx-border-gradient-spin { border: 2px solid transparent; border-radius: var(--cx-radius-md); background: linear-gradient(var(--cx-bg-surface), var(--cx-bg-surface)) padding-box, conic-gradient(from var(--cx-grad-angle), #a855f7, #06b6d4, #10b981, #f59e0b, #a855f7) border-box; animation: cx-gradient-rotate 3s linear infinite; } .cx-border-gradient-purple { border: 1px solid transparent; border-radius: var(--cx-radius-md); background: linear-gradient(var(--cx-bg-surface), var(--cx-bg-surface)) padding-box, linear-gradient(135deg, #a855f7, #7c3aed) border-box; } .cx-border-gradient-cyber { border: 1px solid transparent; border-radius: var(--cx-radius-md); background: linear-gradient(var(--cx-bg-surface), var(--cx-bg-surface)) padding-box, linear-gradient(135deg, #06b6d4, #a855f7) border-box; } /* ═══ CREATIVE: Mask & Overlay Patterns ═══ */ .cx-pattern-dots { background-image: radial-gradient(rgba(139, 92, 246, 0.15) 1px, transparent 1px); background-size: 16px 16px; } .cx-pattern-grid { background-image: linear-gradient(rgba(139, 92, 246, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, 0.08) 1px, transparent 1px); background-size: 24px 24px; } .cx-pattern-diagonal { background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(139, 92, 246, 0.05) 10px, rgba(139, 92, 246, 0.05) 11px); } .cx-pattern-cross { background-image: radial-gradient(rgba(139, 92, 246, 0.12) 1.5px, transparent 1.5px), radial-gradient(rgba(139, 92, 246, 0.12) 1.5px, transparent 1.5px); background-size: 20px 20px; background-position: 0 0, 10px 10px; } .cx-pattern-circuit { background-image: linear-gradient(rgba(139, 92, 246, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, 0.06) 1px, transparent 1px), radial-gradient(rgba(139, 92, 246, 0.1) 2px, transparent 2px); background-size: 40px 40px, 40px 40px, 40px 40px; background-position: 0 0, 0 0, 20px 20px; } /* ═══ CREATIVE: Conic Gradients ═══ */ .cx-conic-purple { background: conic-gradient(from 0deg, #a855f7, #7c3aed, #6b21a8, #a855f7); } .cx-conic-rainbow { background: conic-gradient(#ef4444, #f59e0b, #10b981, #06b6d4, #a855f7, #ec4899, #ef4444); } .cx-conic-cyber { background: conic-gradient(from 45deg, #a855f7, #06b6d4, #a855f7); } .cx-conic-loading { background: conic-gradient(from 0deg, transparent 0deg, #a855f7 360deg); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); animation: cx-spin-slow 1.5s linear infinite; border-radius: 50%; } /* ═══ CREATIVE: Flip Card ═══ */ .cx-flip-card { perspective: 1000px; } .cx-flip-card-inner { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; position: relative; } .cx-flip-card:hover .cx-flip-card-inner, .cx-flip-card.flipped .cx-flip-card-inner { transform: rotateY(180deg); } .cx-flip-card-front, .cx-flip-card-back { backface-visibility: hidden; position: absolute; inset: 0; border-radius: var(--cx-radius-md); } .cx-flip-card-back { transform: rotateY(180deg); } /* ═══ CREATIVE: Prompt Box / Chat Input ═══ */ .cx-prompt-box { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.5rem; background: var(--cx-bg-surface); border: 1px solid rgba(139, 92, 246, 0.15); border-radius: var(--cx-radius-lg); transition: border-color 0.2s; } .cx-prompt-box:focus-within { border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08); } .cx-prompt-box textarea { flex: 1; background: transparent; border: none; color: var(--cx-text-primary); font-size: var(--cx-type-sm); resize: none; outline: none; max-height: 120px; line-height: 1.5; } .cx-prompt-box-send { width: 2rem; height: 2rem; border-radius: var(--cx-radius-sm); background: linear-gradient(135deg, #a855f7, #7c3aed); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; } .cx-prompt-box-send:hover { transform: scale(1.05); box-shadow: 0 0 12px rgba(168, 85, 247, 0.3); } .cx-prompt-box-send:active { transform: scale(0.95); } .cx-prompt-box-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* ═══ CREATIVE: Particle & Dot Effects ═══ */ @keyframes cx-particle-drift { 0% { transform: translate(0, 0) scale(1); opacity: 0.6; } 50% { opacity: 0.3; } 100% { transform: translate(var(--cx-drift-x, 20px), var(--cx-drift-y, -30px)) scale(0.5); opacity: 0; } } .cx-particle { position: absolute; width: var(--cx-particle-size, 4px); height: var(--cx-particle-size, 4px); border-radius: 50%; background: var(--cx-particle-color, #a855f7); animation: cx-particle-drift var(--cx-particle-speed, 3s) ease-in-out infinite; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════ DEVOPS & AI OPERATIONS — Advanced Infrastructure Styles ═══════════════════════════════════════════════════════════════════ */ /* ─── DevOps Custom Properties ─── */ :root { --cx-terminal-bg: #0a0a0f; --cx-terminal-text: #e4e4e7; --cx-terminal-border: rgba(168, 85, 247, 0.1); --cx-log-bg: #09090b; --cx-log-font: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --cx-accent-purple: #a855f7; --cx-accent-cyan: #06b6d4; --cx-success: #22c55e; --cx-warning: #f59e0b; --cx-danger: #ef4444; --cx-info-blue: #3b82f6; --cx-muted: #71717a; --cx-surface-900: #18181b; --cx-surface-950: #09090b; --cx-border-700: #3f3f46; --cx-border-800: #27272a; } /* ─── 1. Log Stream Styles ─── */ .cx-log-stream { background: var(--cx-log-bg); color: var(--cx-terminal-text); font-family: var(--cx-log-font); font-size: 0.8125rem; line-height: 1.6; border-radius: 0.5rem; border: 1px solid var(--cx-border-800); padding: 0.75rem; overflow-y: auto; max-height: 28rem; scrollbar-width: thin; scrollbar-color: var(--cx-border-700) transparent; } .cx-log-stream::-webkit-scrollbar { width: 6px; } .cx-log-stream::-webkit-scrollbar-track { background: transparent; } .cx-log-stream::-webkit-scrollbar-thumb { background: var(--cx-border-700); border-radius: 3px; } .cx-log-entry { padding: 0.125rem 0.5rem; border-left: 3px solid transparent; border-radius: 0 0.25rem 0.25rem 0; transition: background 0.15s ease; animation: cx-log-highlight 0.6s ease-out; } .cx-log-entry:hover { background: rgba(255, 255, 255, 0.03); } .cx-log-info { border-left-color: var(--cx-accent-cyan); color: var(--cx-accent-cyan); } .cx-log-warn { border-left-color: var(--cx-warning); color: var(--cx-warning); } .cx-log-error { border-left-color: var(--cx-danger); color: var(--cx-danger); background: rgba(239, 68, 68, 0.06); } .cx-log-debug { border-left-color: var(--cx-muted); color: var(--cx-muted); opacity: 0.7; } /* ─── 2. Alert & Incident Styles ─── */ .cx-alert-rule { background: var(--cx-surface-900); border: 1px solid var(--cx-border-800); border-left: 4px solid var(--cx-border-700); border-radius: 0.5rem; padding: 0.875rem 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .cx-alert-rule:hover { box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.15); } .cx-alert-critical { border-left-color: var(--cx-danger); } .cx-alert-warning { border-left-color: var(--cx-warning); } .cx-alert-info { border-left-color: var(--cx-info-blue); } .cx-incident-timeline { position: relative; padding-left: 1.75rem; } .cx-incident-timeline::before { content: ''; position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background: var(--cx-border-700); } .cx-incident-dot { position: absolute; left: 0.25rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--cx-accent-purple); border: 2px solid var(--cx-surface-900); z-index: 1; } /* ─── 3. Container & Infrastructure ─── */ .cx-container-card { background: var(--cx-surface-900); border: 1px solid var(--cx-border-800); border-radius: 0.5rem; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.625rem; transition: border-color 0.2s ease; } .cx-container-card:hover { border-color: var(--cx-border-700); } .cx-container-running::before, .cx-container-stopped::before, .cx-container-paused::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; } .cx-container-running::before { background: var(--cx-success); box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); animation: cx-data-pulse 2s ease-in-out infinite; } .cx-container-stopped::before { background: var(--cx-danger); } .cx-container-paused::before { background: var(--cx-warning); } .cx-endpoint-method { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-family: var(--cx-log-font); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .cx-method-get { background: #22c55e20; color: #22c55e; } .cx-method-post { background: #3b82f620; color: #3b82f6; } .cx-method-put { background: #f59e0b20; color: #f59e0b; } .cx-method-delete { background: #ef444420; color: #ef4444; } .cx-method-patch { background: #a855f720; color: #a855f7; } /* ─── 4. Secret & Config Styles ─── */ .cx-secret-value { font-family: var(--cx-log-font); filter: blur(5px); user-select: none; transition: filter 0.25s ease; cursor: pointer; } .cx-secret-revealed, .cx-secret-value.cx-secret-revealed { filter: blur(0); user-select: text; } .cx-env-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .cx-env-prod { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.25); } .cx-env-staging { background: rgba(245, 158, 11, 0.12); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.25); } .cx-env-dev { background: rgba(34, 197, 94, 0.12); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.25); } /* ─── 5. Monitoring & Metrics ─── */ .cx-metric-sparkline { display: inline-flex; align-items: flex-end; gap: 1px; height: 1.5rem; padding: 0.125rem; background: var(--cx-surface-950); border-radius: 0.25rem; overflow: hidden; } .cx-rate-limit-gauge { position: relative; width: 3rem; height: 3rem; border-radius: 50%; background: conic-gradient( var(--cx-accent-cyan) calc(var(--cx-gauge-pct, 50) * 1%), var(--cx-border-800) 0 ); display: flex; align-items: center; justify-content: center; } .cx-rate-limit-gauge::after { content: ''; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--cx-surface-900); } .cx-ssl-valid { color: var(--cx-success); } .cx-ssl-expiring { color: var(--cx-warning); } .cx-ssl-expired { color: var(--cx-danger); } .cx-cron-schedule { font-family: var(--cx-log-font); letter-spacing: 0.04em; } /* ─── 6. AI Operation Styles ─── */ .cx-model-card { background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, rgba(6, 182, 212, 0.04) 100%); backdrop-filter: blur(12px); border: 1px solid rgba(168, 85, 247, 0.15); border-radius: 0.75rem; padding: 1rem 1.25rem; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .cx-model-card:hover { border-color: rgba(168, 85, 247, 0.35); box-shadow: 0 4px 24px rgba(168, 85, 247, 0.08); } .cx-model-provider { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; border: 1px solid transparent; } .cx-provider-anthropic { background: rgba(204, 133, 75, 0.12); color: #d4a574; border-color: rgba(204, 133, 75, 0.25); } .cx-provider-openai { background: rgba(16, 163, 127, 0.12); color: #34d399; border-color: rgba(16, 163, 127, 0.25); } .cx-provider-meta { background: rgba(59, 130, 246, 0.12); color: #93c5fd; border-color: rgba(59, 130, 246, 0.25); } .cx-provider-google { background: rgba(234, 179, 8, 0.12); color: #fde047; border-color: rgba(234, 179, 8, 0.25); } .cx-command-history { background: var(--cx-terminal-bg); font-family: var(--cx-log-font); font-size: 0.8125rem; border: 1px solid var(--cx-terminal-border); border-radius: 0.5rem; padding: 0.75rem; overflow-x: auto; } .cx-command-line { padding: 0.1875rem 0; color: var(--cx-terminal-text); white-space: pre; } .cx-command-line::before { content: '$ '; color: var(--cx-accent-purple); font-weight: 700; } /* ─── 7. Terminal & Command Styles ─── */ .cx-terminal-dark { background: var(--cx-terminal-bg); border: 1px solid var(--cx-terminal-border); border-radius: 0.625rem; overflow: hidden; } .cx-terminal-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--cx-border-800); } .cx-terminal-dots { display: flex; gap: 0.375rem; } .cx-terminal-dots::before { content: '● ● ●'; font-size: 0.625rem; letter-spacing: 0.375rem; background: linear-gradient(90deg, #ef4444 0%, #ef4444 28%, #f59e0b 36%, #f59e0b 64%, #22c55e 72%, #22c55e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ─── 8. Status & Health Indicators ─── */ .cx-health-healthy { color: var(--cx-success); animation: cx-heartbeat 2s ease-in-out infinite; } .cx-health-degraded { color: var(--cx-warning); animation: cx-heartbeat 1.2s ease-in-out infinite; } .cx-health-down { color: var(--cx-danger); animation: none; opacity: 0.8; } @keyframes cx-heartbeat { 0%, 100% { transform: scale(1); opacity: 1; } 14% { transform: scale(1.15); opacity: 0.9; } 28% { transform: scale(1); opacity: 1; } 42% { transform: scale(1.1); opacity: 0.9; } 56% { transform: scale(1); } } @keyframes cx-scan-line { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } /* ─── 9. Infrastructure Grid ─── */ .cx-infra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; } .cx-server-rack { background: var(--cx-surface-900); border: 1px solid var(--cx-border-800); border-radius: 0.5rem; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; position: relative; overflow: hidden; } .cx-server-rack::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(168, 85, 247, 0.03) 100%); pointer-events: none; } .cx-network-node { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--cx-surface-900); border: 2px solid var(--cx-border-700); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .cx-network-node:hover { border-color: var(--cx-accent-purple); box-shadow: 0 0 12px rgba(168, 85, 247, 0.2); } /* ─── 10. DevOps Animations ─── */ @keyframes cx-deploy-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes cx-log-highlight { 0% { background: rgba(168, 85, 247, 0.1); } 100% { background: transparent; } } @keyframes cx-terminal-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes cx-data-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 4px currentColor; } 50% { opacity: 0.6; box-shadow: 0 0 8px currentColor; } } /* ─── Reduced Motion Accessibility ─── */ @media (prefers-reduced-motion: reduce) { .cx-mesh-bg, .cx-mesh-card, .cx-aurora::before, .cx-float, .cx-glow-pulse, .cx-glow-breathe-ambient, .cx-glow-ring, .cx-hover-shine::after, .cx-click-ripple::after, .cx-appear, .cx-border-shimmer::before, .cx-border-rainbow::before, .cx-skeleton-wave, .cx-skeleton-glow, .cx-loading-dots::before, .cx-loading-dots::after, .cx-loading-dots span, .cx-loading-bar::after, .cx-text-shimmer, .cx-text-glow-pulse, .cx-text-typewriter, .cx-neon-text { animation: none !important; } .cx-hover-lift:hover, .cx-hover-scale:hover { transform: none !important; } .cx-hover-glow:hover { box-shadow: 0 0 8px rgba(168, 85, 247, 0.15) !important; } .cx-text-typewriter { width: 100%; border-right: none; } } /* ═══════════════════════════════════════════════════════════════════ END — Beauty, Depth & Performance Layer ═══════════════════════════════════════════════════════════════════ */ /* ─── High Contrast Mode ─── */ @media (prefers-contrast: high) { .cx-card, .cx-card-base { border-width: 2px; } .cx-badge { border: 1px solid currentColor; } } /* ─── Dynamic States ─── */ /* Loading states */ .cx-loading { position: relative; pointer-events: none; } .cx-loading::after { content: ''; position: absolute; inset: 0; background: var(--cx-bg-overlay); border-radius: inherit; display: flex; align-items: center; justify-content: center; } .cx-loading > * { opacity: 0.5; } /* Skeleton pulse - dynamic placeholder */ .cx-skeleton-pulse { background: linear-gradient(90deg, var(--cx-bg-surface) 25%, var(--cx-bg-raised) 50%, var(--cx-bg-surface) 75%); background-size: 200% 100%; animation: cx-skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--cx-radius-sm); } @keyframes cx-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .cx-skeleton-text { height: 0.75rem; width: 80%; } .cx-skeleton-title { height: 1.25rem; width: 60%; } .cx-skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; } .cx-skeleton-card { height: 8rem; width: 100%; } .cx-skeleton-btn { height: 2.25rem; width: 6rem; } /* Appear/reveal on scroll */ .cx-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--cx-ease), transform 0.5s var(--cx-ease); } .cx-reveal.visible { opacity: 1; transform: translateY(0); } /* Content-aware scaling */ .cx-scale-content { font-size: clamp(0.6875rem, 0.5rem + 0.4vw, 0.875rem); line-height: 1.5; } .cx-scale-heading { font-size: clamp(1rem, 0.7rem + 0.8vw, 1.5rem); line-height: 1.3; font-weight: 700; } .cx-scale-display { font-size: clamp(1.5rem, 1rem + 1.2vw, 3rem); line-height: 1.1; font-weight: 800; } /* Auto-dark surfaces — darker nested levels */ .cx-depth-0 { background: var(--cx-bg-base); } .cx-depth-1 { background: var(--cx-bg-surface); } .cx-depth-2 { background: var(--cx-bg-raised); } .cx-depth-3 { background: color-mix(in srgb, var(--cx-bg-raised) 80%, white 2%); } /* ─── Theme Transition ─── */ .cx-theme-transition, .cx-theme-transition *, .cx-theme-transition *::before, .cx-theme-transition *::after { transition: background-color 0.3s var(--cx-ease), border-color 0.3s var(--cx-ease), color 0.3s var(--cx-ease), box-shadow 0.3s var(--cx-ease), fill 0.3s var(--cx-ease) !important; } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE ENHANCEMENTS ═══════════════════════════════════════════════════════════════════ */ /* ─── Responsive Spacing Utilities ─── */ .cx-gap-xs { gap: 0.25rem; } .cx-gap-sm { gap: 0.5rem; } .cx-gap-md { gap: 0.75rem; } .cx-gap-lg { gap: 1rem; } .cx-gap-xl { gap: 1.5rem; } .cx-gap-2xl { gap: 2rem; } .cx-p-xs { padding: 0.25rem; } .cx-p-sm { padding: 0.5rem; } .cx-p-md { padding: 0.75rem; } .cx-p-lg { padding: 1rem; } .cx-p-xl { padding: 1.5rem; } .cx-p-2xl { padding: 2rem; } @media (max-width: 768px) { .cx-gap-xl { gap: 1rem; } .cx-gap-2xl { gap: 1.5rem; } .cx-p-xl { padding: 1rem; } .cx-p-2xl { padding: 1.5rem; } } /* ─── Responsive Header ─── */ @media (max-width: 768px) { .cx-header { padding: 0.5rem 0.75rem; gap: 0.5rem; } .cx-header .cx-breadcrumbs { display: none; } } @media (max-width: 480px) { .cx-header { flex-wrap: wrap; } } /* ─── Responsive Cards & Panels ─── */ @media (max-width: 768px) { .cx-card { padding: 0.75rem; } .cx-panel-header { padding: 0.75rem; flex-wrap: wrap; gap: 0.5rem; } .cx-panel-body { padding: 0.75rem; } .cx-stat-card { padding: 0.75rem; } } @media (max-width: 480px) { .cx-card, .cx-panel-body { padding: 0.5rem; } } /* ─── Touch-Friendly Targets ─── */ @media (max-width: 768px) { .cx-btn { min-height: 44px; padding: 0.5rem 1rem; } .cx-btn-xs { min-height: 36px; padding: 0.375rem 0.75rem; } .cx-btn-sm { min-height: 40px; } .cx-input, .cx-select, .cx-textarea { min-height: 44px; padding: 0.5rem 0.75rem; font-size: 1rem; /* Prevent iOS zoom */ } .cx-toggle { min-height: 44px; display: flex; align-items: center; } } /* ─── Mobile Utility Classes ─── */ .cx-mobile-only { display: none; } .cx-tablet-only { display: none; } .cx-desktop-only { display: block; } @media (max-width: 768px) { .cx-mobile-only { display: block; } .cx-desktop-only { display: none; } .cx-mobile-stack { flex-direction: column !important; } .cx-mobile-full { width: 100% !important; } .cx-mobile-center { text-align: center !important; justify-content: center !important; } .cx-mobile-hidden { display: none !important; } } @media (min-width: 769px) and (max-width: 1024px) { .cx-tablet-only { display: block; } } /* ─── Scrollbar Hidden Utility ─── */ .cx-scrollbar-hidden { scrollbar-width: none; -ms-overflow-style: none; } .cx-scrollbar-hidden::-webkit-scrollbar { display: none; } /* ─── iPhone Optimization ─── */ /* iPhone SE/Mini (320-375px) */ @media (max-width: 375px) { body { font-size: 13px; } .cx-card { padding: 0.5rem; } .cx-panel-header { padding: 0.5rem 0.75rem; } .cx-panel-body { padding: 0.5rem; } .cx-btn { font-size: 0.75rem; padding: 0.375rem 0.75rem; } .cx-stat-card { padding: 0.5rem; } .cx-stat-card .text-2xl, .cx-stat-card .text-xl { font-size: 1.25rem; } } /* Prevent iOS text size adjust */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Safe area padding for notch iPhones */ @supports (padding: env(safe-area-inset-top)) { .cx-header { padding-top: max(0.5rem, env(safe-area-inset-top)); padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); } .cx-sidebar { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); } } /* Momentum scrolling for iOS */ .cx-sidebar, .cx-scrollbar-hidden, [style*="overflow"] { -webkit-overflow-scrolling: touch; } /* iOS input zoom prevention (font-size must be >= 16px) */ @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="url"], select, textarea { font-size: 16px !important; } } /* ─── Tab Polish ─── */ .cx-tab { position: relative; transition: color 0.2s var(--cx-ease), background 0.2s var(--cx-ease); } .cx-tab:hover { color: var(--cx-purple-300); background: rgba(168, 85, 247, 0.06); } .cx-tab::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--cx-purple-500); transition: width 0.2s var(--cx-ease), left 0.2s var(--cx-ease); } .cx-tab:hover::after { width: 100%; left: 0; } /* ─── Feature Card Hover ─── */ .cx-feature-card { transition: transform 0.2s var(--cx-ease), box-shadow 0.2s var(--cx-ease), border-color 0.2s var(--cx-ease); } .cx-feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(168, 85, 247, 0.1); border-color: var(--cx-border-hover); } .cx-feature-card:hover .cx-feature-icon { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.4)); } .cx-feature-icon { transition: transform 0.3s var(--cx-spring), filter 0.3s var(--cx-ease); } /* ─── Badge Dot Subtle Pulse ─── */ .cx-badge-dot { position: relative; } .cx-badge-dot::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: cx-dot-pulse 2.5s ease-in-out infinite; } /* ─── Compact Panel Spacing ─── */ .cx-showcase-gap { gap: 1rem; } /* ═══════════════════════════════════════════════════════════════════ */ /* SPACING & SIZING UTILITY SCALE */ /* ═══════════════════════════════════════════════════════════════════ */ /* Spacing tokens */ .cx-space-0 { gap: 0; } .cx-space-1 { gap: 0.25rem; } .cx-space-2 { gap: 0.5rem; } .cx-space-3 { gap: 0.75rem; } .cx-space-4 { gap: 1rem; } .cx-space-6 { gap: 1.5rem; } .cx-space-8 { gap: 2rem; } /* Padding utilities */ .cx-p-0 { padding: 0; } .cx-p-1 { padding: 0.25rem; } .cx-p-2 { padding: 0.5rem; } .cx-p-3 { padding: 0.75rem; } .cx-p-4 { padding: 1rem; } .cx-p-6 { padding: 1.5rem; } .cx-px-2 { padding-inline: 0.5rem; } .cx-px-3 { padding-inline: 0.75rem; } .cx-px-4 { padding-inline: 1rem; } .cx-py-1 { padding-block: 0.25rem; } .cx-py-2 { padding-block: 0.5rem; } .cx-py-3 { padding-block: 0.75rem; } /* Width utilities */ .cx-w-full { width: 100%; } .cx-w-auto { width: auto; } .cx-max-w-sm { max-width: 24rem; } .cx-max-w-md { max-width: 28rem; } .cx-max-w-lg { max-width: 32rem; } .cx-max-w-xl { max-width: 36rem; } .cx-max-w-2xl { max-width: 42rem; } .cx-max-w-4xl { max-width: 56rem; } .cx-max-w-full { max-width: 100%; } .cx-max-w-prose { max-width: 65ch; } /* Aspect ratios */ .cx-aspect-square { aspect-ratio: 1 / 1; } .cx-aspect-video { aspect-ratio: 16 / 9; } .cx-aspect-wide { aspect-ratio: 21 / 9; } .cx-aspect-portrait { aspect-ratio: 3 / 4; } /* ═══════════════════════════════════════════════════════════════════ */ /* LAYOUT COMPOSITION PRIMITIVES (Every Layout inspired) */ /* ═══════════════════════════════════════════════════════════════════ */ /* Stack — vertical rhythm */ .cx-stack { display: flex; flex-direction: column; } .cx-stack > * + * { margin-top: var(--cx-stack-space, 1rem); } .cx-stack-xs > * + * { margin-top: 0.25rem; } .cx-stack-sm > * + * { margin-top: 0.5rem; } .cx-stack-lg > * + * { margin-top: 1.5rem; } .cx-stack-xl > * + * { margin-top: 2rem; } /* Cluster — wrapping horizontal */ .cx-cluster { display: flex; flex-wrap: wrap; gap: var(--cx-cluster-space, 0.75rem); align-items: center; } /* Center — intrinsic centering */ .cx-center { box-sizing: content-box; max-inline-size: var(--cx-center-max, 60rem); margin-inline: auto; padding-inline: var(--cx-center-gutter, 1rem); } /* Sidebar layout — content + sidebar */ .cx-with-sidebar { display: flex; flex-wrap: wrap; gap: var(--cx-sidebar-gap, 1rem); } .cx-with-sidebar > :first-child { flex-basis: var(--cx-sidebar-width, 16rem); flex-grow: 1; } .cx-with-sidebar > :last-child { flex-basis: 0; flex-grow: 999; min-inline-size: var(--cx-content-min, 50%); } /* Switcher — switch from row to column at threshold */ .cx-switcher { display: flex; flex-wrap: wrap; gap: var(--cx-switcher-gap, 1rem); } .cx-switcher > * { flex-grow: 1; flex-basis: calc((var(--cx-switcher-threshold, 30rem) - 100%) * 999); } /* Cover — vertically centered with header/footer */ .cx-cover { display: flex; flex-direction: column; min-block-size: var(--cx-cover-min, 100vh); padding: var(--cx-cover-pad, 1rem); } .cx-cover > * { margin-block: auto; } .cx-cover > :first-child:not(.cx-cover-center) { margin-block-start: 0; } .cx-cover > :last-child:not(.cx-cover-center) { margin-block-end: 0; } /* Frame — intrinsic aspect-ratio container */ .cx-frame { aspect-ratio: var(--cx-frame-ratio, 16 / 9); overflow: hidden; display: flex; align-items: center; justify-content: center; } .cx-frame > img, .cx-frame > video { inline-size: 100%; block-size: 100%; object-fit: cover; } /* Reel — horizontal scrolling */ .cx-reel { display: flex; overflow-x: auto; overflow-y: hidden; gap: var(--cx-reel-gap, 1rem); scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, 0.2) transparent; } .cx-reel > * { flex-shrink: 0; scroll-snap-align: start; } .cx-reel::-webkit-scrollbar { height: 4px; } .cx-reel::-webkit-scrollbar-track { background: transparent; } .cx-reel::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.2); border-radius: 2px; } /* Grid with auto-fit columns */ .cx-auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cx-grid-min, 15rem)), 1fr)); gap: var(--cx-grid-gap, 1rem); } /* ═══════════════════════════════════════════════════════════════════ */ /* ANIMATION & MOTION TOKEN SYSTEM */ /* ═══════════════════════════════════════════════════════════════════ */ /* Reduced motion — respect user preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .cx-no-reduce-motion { animation-duration: revert !important; transition-duration: revert !important; } } /* Entrance animations */ @keyframes cx-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes cx-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes cx-fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes cx-fade-left { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } @keyframes cx-fade-right { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } @keyframes cx-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes cx-scale-up { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes cx-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes cx-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes cx-slide-left { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes cx-slide-right { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* Animation utility classes */ .cx-animate-fade-in { animation: cx-fade-in 0.3s var(--cx-ease) both; } .cx-animate-fade-up { animation: cx-fade-up 0.3s var(--cx-ease) both; } .cx-animate-fade-down { animation: cx-fade-down 0.3s var(--cx-ease) both; } .cx-animate-fade-left { animation: cx-fade-left 0.3s var(--cx-ease) both; } .cx-animate-fade-right { animation: cx-fade-right 0.3s var(--cx-ease) both; } .cx-animate-scale-in { animation: cx-scale-in 0.2s var(--cx-spring-snappy) both; } .cx-animate-scale-up { animation: cx-scale-up 0.3s var(--cx-spring-bouncy) both; } .cx-animate-slide-up { animation: cx-slide-up 0.3s var(--cx-ease) both; } .cx-animate-slide-down { animation: cx-slide-down 0.3s var(--cx-ease) both; } /* Stagger children */ .cx-stagger > * { animation: cx-fade-up 0.3s var(--cx-ease) both; } .cx-stagger > *:nth-child(1) { animation-delay: 0ms; } .cx-stagger > *:nth-child(2) { animation-delay: 50ms; } .cx-stagger > *:nth-child(3) { animation-delay: 100ms; } .cx-stagger > *:nth-child(4) { animation-delay: 150ms; } .cx-stagger > *:nth-child(5) { animation-delay: 200ms; } .cx-stagger > *:nth-child(6) { animation-delay: 250ms; } .cx-stagger > *:nth-child(7) { animation-delay: 300ms; } .cx-stagger > *:nth-child(8) { animation-delay: 350ms; } .cx-stagger > *:nth-child(9) { animation-delay: 400ms; } .cx-stagger > *:nth-child(10) { animation-delay: 450ms; } /* Continuous animations */ @keyframes cx-spin { to { transform: rotate(360deg); } } @keyframes cx-ping { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes cx-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes cx-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } } @keyframes cx-glow-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(139, 92, 246, 0.2); } 50% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); } } @keyframes cx-border-flow { 0% { border-color: rgba(139, 92, 246, 0.2); } 50% { border-color: rgba(139, 92, 246, 0.5); } 100% { border-color: rgba(139, 92, 246, 0.2); } } .cx-spin { animation: cx-spin 1s linear infinite; } .cx-ping { animation: cx-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; } .cx-bounce { animation: cx-bounce 1s ease-in-out infinite; } .cx-wiggle { animation: cx-wiggle 0.3s ease-in-out; } .cx-glow-pulse { animation: cx-glow-pulse 2s ease-in-out infinite; } .cx-border-flow { animation: cx-border-flow 2s ease-in-out infinite; } /* Transition presets */ .cx-transition-fast { transition: all 0.1s var(--cx-ease); } .cx-transition { transition: all 0.15s var(--cx-ease); } .cx-transition-slow { transition: all 0.3s var(--cx-ease); } .cx-transition-spring { transition: all 0.2s var(--cx-spring-snappy); } .cx-transition-bouncy { transition: all 0.3s var(--cx-spring-bouncy); } .cx-transition-colors { transition: color 0.15s var(--cx-ease), background-color 0.15s var(--cx-ease), border-color 0.15s var(--cx-ease); } .cx-transition-shadow { transition: box-shadow 0.15s var(--cx-ease); } .cx-transition-transform { transition: transform 0.15s var(--cx-ease); } /* ═══════════════════════════════════════════════════════════════════ */ /* ACCESSIBILITY UTILITIES */ /* ═══════════════════════════════════════════════════════════════════ */ /* Screen reader only */ .cx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .cx-not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } /* Focus styles */ .cx-focus-ring:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 2px; } .cx-focus-within:focus-within { outline: 2px solid var(--cx-accent); outline-offset: 2px; } .cx-focus-inset:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: -2px; } /* Skip navigation link */ .cx-skip-nav { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); z-index: 9999; padding: 0.5rem 1rem; background: var(--cx-bg-surface); color: var(--cx-text-primary); border: 2px solid var(--cx-accent); border-radius: var(--cx-radius-md); font-size: var(--cx-type-sm); font-weight: 600; text-decoration: none; transition: top 0.2s var(--cx-ease); } .cx-skip-nav:focus { top: 0.5rem; } /* ARIA live region styling */ [aria-live="polite"], [aria-live="assertive"] { position: relative; } .cx-live-region { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } /* High contrast mode support */ @media (forced-colors: active) { .cx-btn, .cx-card, .cx-panel, .cx-badge, .cx-chip { border: 1px solid CanvasText; } .cx-btn:focus-visible { outline: 2px solid Highlight; } } /* ═══════════════════════════════════════════════════════════════════ */ /* TYPOGRAPHY UTILITIES */ /* ═══════════════════════════════════════════════════════════════════ */ /* Font sizes */ .cx-text-2xs { font-size: 0.625rem; line-height: 1.2; } .cx-text-xs { font-size: var(--cx-type-xs); line-height: 1.3; } .cx-text-sm { font-size: var(--cx-type-sm); line-height: 1.4; } .cx-text-base { font-size: var(--cx-type-base); line-height: 1.5; } .cx-text-md { font-size: var(--cx-type-md); line-height: 1.5; } .cx-text-lg { font-size: var(--cx-type-lg); line-height: 1.4; } .cx-text-xl { font-size: var(--cx-type-xl); line-height: 1.3; } .cx-text-2xl { font-size: var(--cx-type-2xl); line-height: 1.2; } .cx-text-hero { font-size: var(--cx-type-hero); line-height: 1.1; } /* Font weights */ .cx-font-light { font-weight: 300; } .cx-font-normal { font-weight: 400; } .cx-font-medium { font-weight: 500; } .cx-font-semibold { font-weight: 600; } .cx-font-bold { font-weight: 700; } .cx-font-black { font-weight: 900; } /* Text styles */ .cx-mono { font-family: var(--cx-font-mono); } .cx-sans { font-family: var(--cx-font-sans); } .cx-tabular { font-variant-numeric: tabular-nums; } .cx-uppercase { text-transform: uppercase; letter-spacing: 0.05em; } .cx-capitalize { text-transform: capitalize; } .cx-tracking-tight { letter-spacing: -0.02em; } .cx-tracking-wide { letter-spacing: 0.05em; } .cx-tracking-wider { letter-spacing: 0.1em; } /* Text truncation */ .cx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx-line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .cx-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cx-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Text colors */ .cx-text-primary { color: var(--cx-text-primary); } .cx-text-secondary { color: var(--cx-text-secondary); } .cx-text-muted { color: var(--cx-text-muted); } .cx-text-ghost { color: var(--cx-text-ghost); } .cx-text-accent { color: var(--cx-accent); } .cx-text-success { color: var(--cx-success); } .cx-text-warning { color: var(--cx-warning); } .cx-text-danger { color: var(--cx-danger); } .cx-text-info { color: var(--cx-info); } /* Prose — readable content blocks */ .cx-prose { max-inline-size: 65ch; color: var(--cx-text-secondary); font-size: var(--cx-type-sm); line-height: 1.7; } .cx-prose p + p { margin-top: 0.75em; } .cx-prose h2, .cx-prose h3, .cx-prose h4 { color: var(--cx-text-primary); margin-top: 1.5em; margin-bottom: 0.5em; } .cx-prose code { font-family: var(--cx-font-mono); font-size: 0.9em; background: rgba(139, 92, 246, 0.08); padding: 0.125em 0.375em; border-radius: 0.25em; color: var(--cx-purple-300); } .cx-prose a { color: var(--cx-accent); text-decoration: underline; text-underline-offset: 2px; } .cx-prose a:hover { text-decoration-color: var(--cx-accent-glow); } .cx-prose ul, .cx-prose ol { padding-inline-start: 1.5em; } .cx-prose li + li { margin-top: 0.375em; } .cx-prose blockquote { border-inline-start: 3px solid var(--cx-accent); padding-inline-start: 1em; color: var(--cx-text-muted); font-style: italic; } /* ═══════════════════════════════════════════════════════════════════ */ /* SURFACE & ELEVATION SYSTEM */ /* ═══════════════════════════════════════════════════════════════════ */ .cx-surface-0 { background: var(--cx-bg-void); } .cx-surface-1 { background: var(--cx-bg-deep); } .cx-surface-2 { background: var(--cx-bg-base); } .cx-surface-3 { background: var(--cx-bg-surface); } .cx-surface-4 { background: var(--cx-bg-raised); } .cx-elevation-0 { box-shadow: none; } .cx-elevation-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15); } .cx-elevation-2 { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1); } .cx-elevation-3 { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.1); } .cx-elevation-4 { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.15); } /* Glass surfaces */ .cx-glass-1 { background: rgba(17, 24, 39, 0.4); backdrop-filter: blur(8px); } .cx-glass-2 { background: rgba(17, 24, 39, 0.6); backdrop-filter: blur(12px); } .cx-glass-3 { background: rgba(17, 24, 39, 0.8); backdrop-filter: blur(20px); } /* Accent borders */ .cx-border-accent { border-color: var(--cx-border); } .cx-border-accent-hover { border-color: var(--cx-border-hover); } .cx-border-success { border-color: rgba(52, 211, 153, 0.3); } .cx-border-warning { border-color: rgba(251, 191, 36, 0.3); } .cx-border-danger { border-color: rgba(248, 113, 113, 0.3); } .cx-border-info { border-color: rgba(96, 165, 250, 0.3); } /* Dividers */ .cx-divider { height: 1px; background: var(--cx-border); } .cx-divider-strong { height: 1px; background: var(--cx-border-hover); } .cx-divider-glow { height: 1px; background: linear-gradient(90deg, transparent, var(--cx-accent), transparent); } /* ═══════════════════════════════════════════════════════════════════ */ /* ADDITIONAL THEMES */ /* ═══════════════════════════════════════════════════════════════════ */ [data-theme="rose"] { --cx-bg-void: #0a0208; --cx-bg-deep: #12030a; --cx-bg-base: #1a0a12; --cx-bg-surface: #24101a; --cx-bg-raised: #301822; --cx-purple-300: #fda4af; --cx-purple-400: #fb7185; --cx-purple-500: #f43f5e; --cx-purple-600: #e11d48; --cx-purple-700: #be123c; --cx-accent: var(--cx-purple-500); --cx-accent-glow: var(--cx-purple-400); --cx-text-primary: #ffe4e6; --cx-border: rgba(244, 63, 94, 0.15); --cx-border-hover: rgba(244, 63, 94, 0.40); --cx-glow-sm: 0 0 8px rgba(244, 63, 94, 0.15); --cx-glow-md: 0 0 20px rgba(244, 63, 94, 0.12); --cx-glow-lg: 0 4px 40px rgba(244, 63, 94, 0.10); --cx-glow-text: 0 0 12px rgba(251, 113, 133, 0.4); } /* ═══════════════════════════════════════════════════════════════════ */ /* FORM COMPONENT STYLES */ /* ═══════════════════════════════════════════════════════════════════ */ /* Form group */ .cx-form-group { display: flex; flex-direction: column; gap: 0.375rem; } .cx-form-label { font-size: var(--cx-type-xs); font-weight: 500; color: var(--cx-text-secondary); letter-spacing: 0.01em; } .cx-form-help { font-size: 0.625rem; color: var(--cx-text-ghost); } .cx-form-error { font-size: 0.625rem; color: var(--cx-danger); } /* Enhanced input states */ .cx-input-success { border-color: rgba(52, 211, 153, 0.4) !important; } .cx-input-success:focus { border-color: rgba(52, 211, 153, 0.6) !important; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.1) !important; } .cx-input-error { border-color: rgba(248, 113, 113, 0.4) !important; } .cx-input-error:focus { border-color: rgba(248, 113, 113, 0.6) !important; box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.1) !important; } .cx-input-warning { border-color: rgba(251, 191, 36, 0.4) !important; } /* Range slider */ .cx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: rgba(139, 92, 246, 0.15); border-radius: 2px; outline: none; cursor: pointer; } .cx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--cx-accent); border: 2px solid var(--cx-bg-surface); box-shadow: 0 0 6px rgba(139, 92, 246, 0.3); cursor: grab; transition: all 0.15s var(--cx-ease); } .cx-range::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 12px rgba(139, 92, 246, 0.4); } .cx-range::-webkit-slider-thumb:active { cursor: grabbing; } .cx-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--cx-accent); border: 2px solid var(--cx-bg-surface); box-shadow: 0 0 6px rgba(139, 92, 246, 0.3); cursor: grab; } /* File upload area */ .cx-file-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.5rem; border: 2px dashed var(--cx-border); border-radius: var(--cx-radius-lg); background: rgba(139, 92, 246, 0.02); cursor: pointer; transition: all 0.2s var(--cx-ease); text-align: center; } .cx-file-drop:hover, .cx-file-drop.cx-drag-over { border-color: var(--cx-accent); background: rgba(139, 92, 246, 0.05); box-shadow: 0 0 20px rgba(139, 92, 246, 0.08); } .cx-file-drop-icon { font-size: 1.5rem; opacity: 0.5; } .cx-file-drop-text { font-size: var(--cx-type-xs); color: var(--cx-text-muted); } .cx-file-drop-hint { font-size: 0.5625rem; color: var(--cx-text-ghost); } /* Color picker swatch */ .cx-color-swatch { width: 1.5rem; height: 1.5rem; border-radius: var(--cx-radius-sm); border: 2px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: all 0.15s var(--cx-ease); } .cx-color-swatch:hover { transform: scale(1.1); border-color: rgba(255, 255, 255, 0.3); } .cx-color-swatch.cx-active { outline: 2px solid var(--cx-accent); outline-offset: 2px; } /* Checkbox & Radio custom */ .cx-checkbox { width: 1rem; height: 1rem; appearance: none; border: 1.5px solid var(--cx-border-hover); border-radius: 0.25rem; background: transparent; cursor: pointer; transition: all 0.15s var(--cx-ease); display: inline-flex; align-items: center; justify-content: center; } .cx-checkbox:checked { background: var(--cx-accent); border-color: var(--cx-accent); } .cx-checkbox:checked::after { content: '✓'; color: white; font-size: 0.625rem; font-weight: 700; } .cx-checkbox:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 2px; } .cx-radio { width: 1rem; height: 1rem; appearance: none; border: 1.5px solid var(--cx-border-hover); border-radius: 50%; background: transparent; cursor: pointer; transition: all 0.15s var(--cx-ease); } .cx-radio:checked { border-color: var(--cx-accent); background: radial-gradient(circle, var(--cx-accent) 40%, transparent 42%); } .cx-radio:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 2px; } /* Textarea */ .cx-textarea { width: 100%; min-height: 4rem; padding: 0.5rem 0.75rem; background: var(--cx-bg-deep); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-md); color: var(--cx-text-primary); font-family: var(--cx-font-sans); font-size: var(--cx-type-sm); resize: vertical; transition: border-color 0.15s var(--cx-ease), box-shadow 0.15s var(--cx-ease); } .cx-textarea:focus { border-color: var(--cx-border-active); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1); outline: none; } /* Select dropdown */ .cx-select-wrapper { position: relative; display: inline-flex; width: 100%; } .cx-select-wrapper::after { content: '▾'; position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--cx-text-ghost); pointer-events: none; font-size: 0.75rem; } /* ═══════════════════════════════════════════════════════════════════ */ /* INTERACTIVE STATE UTILITIES */ /* ═══════════════════════════════════════════════════════════════════ */ /* Disabled state */ .cx-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; filter: grayscale(0.3); } /* Loading state */ .cx-loading { position: relative; pointer-events: none; color: transparent !important; } .cx-loading::after { content: ''; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(139, 92, 246, 0.2); border-top-color: var(--cx-accent); border-radius: 50%; width: 1rem; height: 1rem; margin: auto; animation: cx-spin 0.6s linear infinite; } /* Active/selected */ .cx-active { background: rgba(139, 92, 246, 0.08) !important; border-color: var(--cx-border-hover) !important; color: var(--cx-text-primary) !important; } /* Dragging state */ .cx-dragging { opacity: 0.6; cursor: grabbing !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); transform: rotate(1deg); } .cx-drop-zone { border: 2px dashed var(--cx-border); border-radius: var(--cx-radius-md); transition: all 0.2s var(--cx-ease); } .cx-drop-zone.cx-drag-over { border-color: var(--cx-accent); background: rgba(139, 92, 246, 0.05); } /* Selectable */ .cx-selectable { cursor: pointer; user-select: none; transition: background-color 0.1s var(--cx-ease); } .cx-selectable:hover { background: rgba(139, 92, 246, 0.05); } .cx-selectable.cx-selected { background: rgba(139, 92, 246, 0.1); } /* Clickable */ .cx-clickable { cursor: pointer; transition: all 0.15s var(--cx-ease); } .cx-clickable:hover { opacity: 0.85; } .cx-clickable:active { transform: scale(0.97); } /* ═══════════════════════════════════════════════════════════════════ */ /* DATA DISPLAY UTILITIES */ /* ═══════════════════════════════════════════════════════════════════ */ /* Empty state */ .cx-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; gap: 0.75rem; } .cx-empty-state-icon { font-size: 2rem; opacity: 0.3; } .cx-empty-state-title { font-size: var(--cx-type-sm); font-weight: 600; color: var(--cx-text-secondary); } .cx-empty-state-text { font-size: var(--cx-type-xs); color: var(--cx-text-ghost); max-width: 30ch; } /* Table enhancements */ .cx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cx-type-xs); } .cx-table th { font-size: 0.5625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cx-text-ghost); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--cx-border); text-align: left; position: sticky; top: 0; background: var(--cx-bg-surface); z-index: 1; } .cx-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(139, 92, 246, 0.04); color: var(--cx-text-secondary); } .cx-table tr:hover td { background: rgba(139, 92, 246, 0.03); } .cx-table-sm th, .cx-table-sm td { padding: 0.375rem 0.5rem; font-size: 0.625rem; } /* Sortable column header */ .cx-sortable { cursor: pointer; user-select: none; transition: color 0.15s var(--cx-ease); } .cx-sortable:hover { color: var(--cx-text-primary); } .cx-sortable::after { content: '⇅'; margin-inline-start: 0.375rem; opacity: 0.3; font-size: 0.5em; } .cx-sortable.cx-sort-asc::after { content: '↑'; opacity: 1; } .cx-sortable.cx-sort-desc::after { content: '↓'; opacity: 1; } /* Status indicators */ .cx-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .cx-status-online { background: var(--cx-success); box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); } .cx-status-offline { background: var(--cx-danger); box-shadow: 0 0 6px rgba(248, 113, 113, 0.4); } .cx-status-warning { background: var(--cx-warning); box-shadow: 0 0 6px rgba(251, 191, 36, 0.4); } .cx-status-idle { background: var(--cx-text-ghost); } /* Key-value display */ .cx-kv { display: flex; justify-content: space-between; align-items: center; padding: 0.375rem 0; font-size: var(--cx-type-xs); border-bottom: 1px solid rgba(139, 92, 246, 0.04); } .cx-kv:last-child { border-bottom: none; } .cx-kv-key { color: var(--cx-text-ghost); } .cx-kv-value { color: var(--cx-text-primary); font-weight: 500; font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════ */ /* LIQUID RESPONSIVE & COMPACT PROFESSIONAL STYLES */ /* ═══════════════════════════════════════════════════════════════════ */ /* Fluid typography — scales between 320px and 1400px viewport */ :root { --cx-fluid-xs: clamp(0.5625rem, 0.5rem + 0.15vw, 0.6875rem); --cx-fluid-sm: clamp(0.6875rem, 0.625rem + 0.2vw, 0.8125rem); --cx-fluid-md: clamp(0.8125rem, 0.75rem + 0.25vw, 1rem); --cx-fluid-lg: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); --cx-fluid-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.75rem); --cx-fluid-2xl: clamp(1.5rem, 1.25rem + 0.75vw, 2.5rem); --cx-fluid-gap: clamp(0.5rem, 0.4rem + 0.3vw, 1rem); --cx-fluid-pad: clamp(0.75rem, 0.5rem + 0.5vw, 1.5rem); } /* Smooth all resizing transitions */ .cx-card, .cx-panel, .cx-stat-compact, .cx-glass-ultra, .cx-micro-card, .cx-chip, .cx-badge, .cx-btn, .cx-input, .cx-select, .cx-alert, .cx-progress-bar { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* Compact card variants */ .cx-card-compact { padding: 0.5rem 0.75rem; border-radius: var(--cx-radius-sm); font-size: var(--cx-fluid-xs); } .cx-card-dense { padding: 0.375rem 0.5rem; gap: 0.25rem; font-size: 0.625rem; } /* Compact panel header */ .cx-panel-compact .cx-panel-header, .cx-panel-compact .cx-card-header { padding: 0.375rem 0.625rem; font-size: var(--cx-fluid-xs); } .cx-panel-compact .cx-panel-body { padding: 0.5rem 0.625rem; } /* Liquid grid system */ .cx-grid-fluid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--cx-fluid-gap); } .cx-grid-fluid-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: var(--cx-fluid-gap); } .cx-grid-fluid-lg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); gap: var(--cx-fluid-gap); } /* Enhanced smooth hover effects */ .cx-hover-lift { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease; } .cx-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 0 10px rgba(139, 92, 246, 0.05); } .cx-hover-glow:hover { box-shadow: 0 0 20px rgba(139, 92, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.15); } .cx-hover-scale { transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .cx-hover-scale:hover { transform: scale(1.02); } .cx-hover-scale:active { transform: scale(0.98); } /* Smooth border gradient animation */ .cx-border-gradient { position: relative; border: 1px solid transparent; background-clip: padding-box; } .cx-border-gradient::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(6, 182, 212, 0.2), rgba(139, 92, 246, 0.1)); z-index: -1; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask-composite: exclude; } /* Compact stat variations */ .cx-stat-inline { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; background: var(--cx-bg-surface); border: 1px solid rgba(139, 92, 246, 0.08); border-radius: var(--cx-radius-sm); font-size: var(--cx-type-xs); transition: all 0.15s ease; } .cx-stat-inline:hover { border-color: rgba(139, 92, 246, 0.2); background: rgba(17, 24, 39, 0.8); } .cx-stat-inline-value { font-weight: 700; color: var(--cx-purple-200); font-variant-numeric: tabular-nums; } .cx-stat-inline-label { font-size: 0.5625rem; color: var(--cx-text-muted); } /* Smooth scroll */ .cx-smooth-scroll { scroll-behavior: smooth; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, 0.2) transparent; } .cx-smooth-scroll::-webkit-scrollbar { width: 4px; } .cx-smooth-scroll::-webkit-scrollbar-track { background: transparent; } .cx-smooth-scroll::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.2); border-radius: 2px; } .cx-smooth-scroll::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.4); } /* Enhanced compact button styles */ .cx-btn-compact { padding: 0.25rem 0.625rem; font-size: 0.625rem; font-weight: 600; border-radius: var(--cx-radius-sm); letter-spacing: 0.01em; } .cx-btn-pill { border-radius: 9999px; padding-left: 0.875rem; padding-right: 0.875rem; } .cx-btn-icon-only { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--cx-radius-sm); } /* Compact info row — key:value in tight space */ .cx-info-row { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0; font-size: var(--cx-type-xs); border-bottom: 1px solid rgba(139, 92, 246, 0.04); } .cx-info-row:last-child { border-bottom: none; } .cx-info-row-label { color: var(--cx-text-muted); } .cx-info-row-value { color: var(--cx-purple-200); font-weight: 500; font-variant-numeric: tabular-nums; } /* Subtle micro-animations */ @keyframes cx-subtle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes cx-subtle-scale-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .cx-float { animation: cx-subtle-float 4s ease-in-out infinite; } .cx-scale-pulse { animation: cx-subtle-scale-pulse 3s ease-in-out infinite; } /* Focus ring for accessibility */ .cx-focus-ring:focus-visible { outline: 2px solid rgba(139, 92, 246, 0.5); outline-offset: 2px; border-radius: var(--cx-radius-sm); } /* Compact responsive breakpoints */ @media (max-width: 480px) { .cx-stat-compact { padding: 0.375rem 0.5rem; gap: 0.375rem; } .cx-stat-compact-icon { width: 1.375rem; height: 1.375rem; font-size: 0.7rem; } .cx-stat-compact-value { font-size: var(--cx-type-sm); } .cx-stat-compact-label { font-size: 0.5625rem; } .cx-card { padding: 0.625rem; } .cx-panel-body { padding: 0.625rem; } h1, .cx-heading-xl { font-size: var(--cx-fluid-xl) !important; } h2, .cx-heading-lg { font-size: var(--cx-fluid-lg) !important; } h3, .cx-heading-md { font-size: var(--cx-fluid-md) !important; } } @media (max-width: 360px) { .cx-stat-compact { padding: 0.25rem 0.375rem; gap: 0.25rem; } .cx-stat-compact-icon { width: 1.125rem; height: 1.125rem; font-size: 0.6rem; } .cx-stat-compact-value { font-size: 0.75rem; } } /* Enhanced Print */ @media print { .cx-no-print, nav, aside, .cx-sidebar, .cx-fab, .cx-marquee, .cx-toast, .cx-modal-overlay { display: none !important; } body { background: white !important; color: black !important; } .cx-card, .cx-card-base { border: 1px solid #ddd !important; box-shadow: none !important; background: white !important; } a { color: inherit !important; text-decoration: underline !important; } a::after { content: ' (' attr(href) ')'; font-size: 0.8em; } } /* ═══════════════════════════════════════════════════════════════════ */ /* CHAOZCODE MOTION ENGINE — Revolutionary Animation System */ /* Alive · Responsive · GPU-Optimized · Infinitely Scalable */ /* ═══════════════════════════════════════════════════════════════════ */ /* ── Motion Design Tokens ── */ :root { --cx-motion-instant: 50ms; --cx-motion-fast: 100ms; --cx-motion-normal: 200ms; --cx-motion-slow: 400ms; --cx-motion-dramatic: 800ms; --cx-motion-stagger-step: 50ms; --cx-motion-entrance: 350ms; --cx-motion-exit: 200ms; /* Spring physics tokens */ --cx-spring-tension: cubic-bezier(0.22, 1.2, 0.36, 1); --cx-spring-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1); --cx-spring-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); --cx-spring-gentle: cubic-bezier(0.25, 0.8, 0.25, 1); /* Easing presets */ --cx-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --cx-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --cx-ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --cx-ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* ── GPU Optimization Layer ── */ .cx-gpu { transform: translateZ(0); backface-visibility: hidden; will-change: transform, opacity; } .cx-contain-layout { contain: layout; } .cx-contain-paint { contain: paint; } .cx-contain-strict { contain: strict; } .cx-contain-content { contain: content; } /* ── Entrance Animations ── */ @keyframes cx-enter-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes cx-enter-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes cx-enter-slide-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } @keyframes cx-enter-slide-left { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes cx-enter-slide-right { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } @keyframes cx-enter-scale { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes cx-enter-scale-bounce { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes cx-enter-flip-x { from { opacity: 0; transform: perspective(400px) rotateX(-15deg); } to { opacity: 1; transform: perspective(400px) rotateX(0); } } @keyframes cx-enter-flip-y { from { opacity: 0; transform: perspective(400px) rotateY(-15deg); } to { opacity: 1; transform: perspective(400px) rotateY(0); } } @keyframes cx-enter-blur { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } } @keyframes cx-enter-drop { 0% { opacity: 0; transform: translateY(-30px) scale(0.9); } 60% { transform: translateY(4px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes cx-enter-zoom-rotate { from { opacity: 0; transform: scale(0.7) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(0); } } /* Entrance animation classes */ .cx-enter-fade { animation: cx-enter-fade var(--cx-motion-entrance) var(--cx-ease-out-expo) both; } .cx-enter-up { animation: cx-enter-slide-up var(--cx-motion-entrance) var(--cx-ease-out-expo) both; } .cx-enter-down { animation: cx-enter-slide-down var(--cx-motion-entrance) var(--cx-ease-out-expo) both; } .cx-enter-left { animation: cx-enter-slide-left var(--cx-motion-entrance) var(--cx-ease-out-expo) both; } .cx-enter-right { animation: cx-enter-slide-right var(--cx-motion-entrance) var(--cx-ease-out-expo) both; } .cx-enter-scale { animation: cx-enter-scale var(--cx-motion-entrance) var(--cx-spring-tension) both; } .cx-enter-bounce { animation: cx-enter-scale-bounce var(--cx-motion-entrance) var(--cx-spring-overshoot) both; } .cx-enter-flip-x { animation: cx-enter-flip-x var(--cx-motion-entrance) var(--cx-ease-out-expo) both; } .cx-enter-flip-y { animation: cx-enter-flip-y var(--cx-motion-entrance) var(--cx-ease-out-expo) both; } .cx-enter-blur { animation: cx-enter-blur var(--cx-motion-entrance) var(--cx-ease-out-expo) both; } .cx-enter-drop { animation: cx-enter-drop 500ms var(--cx-spring-tension) both; } .cx-enter-zoom-rotate { animation: cx-enter-zoom-rotate var(--cx-motion-entrance) var(--cx-spring-overshoot) both; } /* ── Exit Animations ── */ @keyframes cx-exit-fade { to { opacity: 0; } } @keyframes cx-exit-slide-down { to { opacity: 0; transform: translateY(12px); } } @keyframes cx-exit-scale { to { opacity: 0; transform: scale(0.9); } } @keyframes cx-exit-blur { to { opacity: 0; filter: blur(6px); } } .cx-exit-fade { animation: cx-exit-fade var(--cx-motion-exit) var(--cx-ease) both; } .cx-exit-down { animation: cx-exit-slide-down var(--cx-motion-exit) var(--cx-ease) both; } .cx-exit-scale { animation: cx-exit-scale var(--cx-motion-exit) var(--cx-ease) both; } .cx-exit-blur { animation: cx-exit-blur var(--cx-motion-exit) var(--cx-ease) both; } /* ── Stagger System (CSS Custom Property Based) ── */ .cx-stagger > * { animation-delay: calc(var(--cx-stagger-index, 0) * var(--cx-motion-stagger-step)); animation-fill-mode: both; } .cx-stagger > *:nth-child(1) { --cx-stagger-index: 0; } .cx-stagger > *:nth-child(2) { --cx-stagger-index: 1; } .cx-stagger > *:nth-child(3) { --cx-stagger-index: 2; } .cx-stagger > *:nth-child(4) { --cx-stagger-index: 3; } .cx-stagger > *:nth-child(5) { --cx-stagger-index: 4; } .cx-stagger > *:nth-child(6) { --cx-stagger-index: 5; } .cx-stagger > *:nth-child(7) { --cx-stagger-index: 6; } .cx-stagger > *:nth-child(8) { --cx-stagger-index: 7; } .cx-stagger > *:nth-child(9) { --cx-stagger-index: 8; } .cx-stagger > *:nth-child(10) { --cx-stagger-index: 9; } .cx-stagger > *:nth-child(n+11) { --cx-stagger-index: 10; } /* Fast/slow stagger variants */ .cx-stagger-fast { --cx-motion-stagger-step: 30ms; } .cx-stagger-slow { --cx-motion-stagger-step: 80ms; } .cx-stagger-dramatic { --cx-motion-stagger-step: 120ms; } /* ── Continuous/Loop Animations ── */ @keyframes cx-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.03); opacity: 0.9; } } @keyframes cx-sway { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(2px) rotate(0.5deg); } 75% { transform: translateX(-2px) rotate(-0.5deg); } } @keyframes cx-orbit { from { transform: rotate(0deg) translateX(6px) rotate(0deg); } to { transform: rotate(360deg) translateX(6px) rotate(-360deg); } } @keyframes cx-morph { 0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; } 50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; } 75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; } } @keyframes cx-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes cx-flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.6; } } @keyframes cx-typewriter-blink { 0%, 49% { border-right-color: currentColor; } 50%, 100% { border-right-color: transparent; } } @keyframes cx-ripple-out { 0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4); } 100% { box-shadow: 0 0 0 15px rgba(168, 85, 247, 0); } } @keyframes cx-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); } 20%, 40%, 60%, 80% { transform: translateX(3px); } } @keyframes cx-rubber-band { 0% { transform: scaleX(1) scaleY(1); } 30% { transform: scaleX(1.25) scaleY(0.75); } 40% { transform: scaleX(0.75) scaleY(1.25); } 50% { transform: scaleX(1.15) scaleY(0.85); } 65% { transform: scaleX(0.95) scaleY(1.05); } 75% { transform: scaleX(1.05) scaleY(0.95); } 100% { transform: scaleX(1) scaleY(1); } } @keyframes cx-heartbeat { 0%, 40%, 80%, 100% { transform: scale(1); } 20%, 60% { transform: scale(1.15); } } @keyframes cx-scanner { 0% { top: 0; opacity: 1; } 50% { opacity: 0.5; } 100% { top: 100%; opacity: 1; } } .cx-breathe { animation: cx-breathe 4s ease-in-out infinite; } .cx-sway { animation: cx-sway 6s ease-in-out infinite; } .cx-orbit { animation: cx-orbit 8s linear infinite; } .cx-morph { animation: cx-morph 8s ease-in-out infinite; } .cx-gradient-shift { animation: cx-gradient-shift 6s ease infinite; background-size: 200% 200%; } .cx-flicker { animation: cx-flicker 3s linear infinite; } .cx-typewriter-blink { border-right: 2px solid; animation: cx-typewriter-blink 1s step-end infinite; } .cx-ripple-out { animation: cx-ripple-out 1.5s ease-out infinite; } .cx-shake { animation: cx-shake 0.5s ease; } .cx-rubber-band { animation: cx-rubber-band 0.8s ease; } .cx-heartbeat { animation: cx-heartbeat 1.5s ease-in-out infinite; } /* ── Hover Micro-Interactions ── */ .cx-hover-scale { transition: transform var(--cx-motion-fast) var(--cx-spring-tension); } .cx-hover-scale:hover { transform: scale(1.05); } .cx-hover-scale:active { transform: scale(0.97); } .cx-hover-rise { transition: transform var(--cx-motion-normal) var(--cx-ease-out-expo), box-shadow var(--cx-motion-normal) var(--cx-ease-out-expo); } .cx-hover-rise:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(168, 85, 247, 0.2), 0 4px 8px -4px rgba(0, 0, 0, 0.3); } .cx-hover-glow-ring { transition: box-shadow var(--cx-motion-normal) var(--cx-ease); } .cx-hover-glow-ring:hover { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15), 0 0 20px rgba(168, 85, 247, 0.1); } .cx-hover-border-glow { transition: border-color var(--cx-motion-normal) var(--cx-ease), box-shadow var(--cx-motion-normal) var(--cx-ease); } .cx-hover-border-glow:hover { border-color: rgba(168, 85, 247, 0.4); box-shadow: inset 0 0 12px rgba(168, 85, 247, 0.05); } .cx-hover-tilt { transition: transform var(--cx-motion-normal) var(--cx-ease); transform-style: preserve-3d; } .cx-hover-tilt:hover { transform: perspective(600px) rotateX(2deg) rotateY(-2deg); } .cx-hover-underline-slide { position: relative; text-decoration: none; } .cx-hover-underline-slide::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, var(--cx-purple-400), var(--cx-purple-600)); transition: width var(--cx-motion-normal) var(--cx-ease-out-expo); } .cx-hover-underline-slide:hover::after { width: 100%; } .cx-hover-bg-shift { transition: background-color var(--cx-motion-normal) var(--cx-ease); } .cx-hover-bg-shift:hover { background-color: rgba(168, 85, 247, 0.08); } /* ── Click/Tap Feedback ── */ .cx-click-ripple { position: relative; overflow: hidden; } .cx-click-ripple::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--cx-ripple-x, 50%) var(--cx-ripple-y, 50%), rgba(168, 85, 247, 0.3) 0%, transparent 60%); opacity: 0; transition: opacity 0.3s ease; } .cx-click-ripple:active::after { opacity: 1; } .cx-click-shrink { transition: transform var(--cx-motion-fast) var(--cx-spring-tension); } .cx-click-shrink:active { transform: scale(0.95); } /* ── Animated Backgrounds ── */ .cx-bg-gradient-animated { background: linear-gradient(-45deg, var(--cx-purple-900), var(--cx-bg-deep), rgba(168, 85, 247, 0.15), var(--cx-bg-base)); background-size: 400% 400%; animation: cx-gradient-shift 15s ease infinite; } .cx-bg-mesh { background: radial-gradient(at 40% 20%, rgba(168, 85, 247, 0.08) 0%, transparent 50%), radial-gradient(at 80% 0%, rgba(96, 165, 250, 0.06) 0%, transparent 50%), radial-gradient(at 0% 50%, rgba(168, 85, 247, 0.04) 0%, transparent 50%), radial-gradient(at 80% 50%, rgba(34, 197, 94, 0.03) 0%, transparent 50%), radial-gradient(at 0% 100%, rgba(168, 85, 247, 0.06) 0%, transparent 50%); } .cx-bg-noise { position: relative; } .cx-bg-noise::before { content: ''; position: absolute; inset: 0; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; } /* ── Animated Borders ── */ @keyframes cx-border-trace { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } } .cx-border-animated { position: relative; border: none; } .cx-border-animated::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(var(--cx-border-angle, 0deg), transparent 20%, var(--cx-purple-500) 50%, transparent 80%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cx-border-rotate 4s linear infinite; } @keyframes cx-border-rotate { to { --cx-border-angle: 360deg; } } @property --cx-border-angle { syntax: ''; initial-value: 0deg; inherits: false; } /* ── Scroll-Triggered Animations (Progressive Enhancement) ── */ @supports (animation-timeline: view()) { .cx-scroll-reveal { animation: cx-enter-slide-up linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; } .cx-scroll-fade { animation: cx-enter-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } .cx-scroll-scale { animation: cx-enter-scale linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; } } /* ── Animated Text Effects ── */ .cx-text-shimmer { background: linear-gradient(90deg, var(--cx-purple-300) 0%, var(--cx-purple-100) 40%, var(--cx-purple-300) 80% ); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: cx-gradient-shift 3s linear infinite; } .cx-text-glow { text-shadow: 0 0 6px rgba(168, 85, 247, 0.4), 0 0 12px rgba(168, 85, 247, 0.2); } .cx-text-reveal { overflow: hidden; } .cx-text-reveal > * { animation: cx-enter-slide-up 0.6s var(--cx-ease-out-expo) both; } /* ── Interactive Feedback States ── */ .cx-state-loading { position: relative; pointer-events: none; opacity: 0.7; } .cx-state-loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(168, 85, 247, 0.1) 50%, transparent 100%); animation: cx-skeleton-shimmer 1.5s ease-in-out infinite; background-size: 200% 100%; border-radius: inherit; } .cx-state-success { animation: cx-enter-scale-bounce 0.4s var(--cx-spring-overshoot) both; border-color: #22c55e !important; } .cx-state-error { animation: cx-shake 0.4s ease both; border-color: #ef4444 !important; } /* ── Performance: Container-Aware Animations ── */ @container (max-width: 300px) { .cx-enter-up, .cx-enter-down, .cx-enter-left, .cx-enter-right, .cx-enter-scale, .cx-enter-bounce { animation-duration: calc(var(--cx-motion-entrance) * 0.6); } .cx-hover-rise:hover { transform: translateY(-2px); } } /* ── Composable Motion Utilities ── */ .cx-delay-100 { animation-delay: 100ms; } .cx-delay-200 { animation-delay: 200ms; } .cx-delay-300 { animation-delay: 300ms; } .cx-delay-500 { animation-delay: 500ms; } .cx-delay-700 { animation-delay: 700ms; } .cx-delay-1000 { animation-delay: 1000ms; } .cx-duration-fast { animation-duration: var(--cx-motion-fast); } .cx-duration-normal { animation-duration: var(--cx-motion-normal); } .cx-duration-slow { animation-duration: var(--cx-motion-slow); } .cx-duration-dramatic { animation-duration: var(--cx-motion-dramatic); } .cx-fill-both { animation-fill-mode: both; } .cx-fill-forwards { animation-fill-mode: forwards; } .cx-iterate-infinite { animation-iteration-count: infinite; } .cx-iterate-2 { animation-iteration-count: 2; } .cx-iterate-3 { animation-iteration-count: 3; } /* ── Alive Components: Subtle ambient animations ── */ .cx-alive-card { transition: transform 0.3s var(--cx-ease-out-expo), box-shadow 0.3s var(--cx-ease-out-expo), border-color 0.3s var(--cx-ease); } .cx-alive-card:hover { transform: translateY(-3px) scale(1.005); box-shadow: 0 8px 30px -10px rgba(168, 85, 247, 0.2), 0 2px 8px -2px rgba(0, 0, 0, 0.3); border-color: rgba(168, 85, 247, 0.3); } .cx-alive-button { transition: all 0.2s var(--cx-spring-tension); } .cx-alive-button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25); } .cx-alive-button:active { transform: translateY(0) scale(0.97); box-shadow: none; transition-duration: 50ms; } .cx-alive-input { transition: border-color 0.2s var(--cx-ease), box-shadow 0.2s var(--cx-ease), transform 0.15s var(--cx-ease); } .cx-alive-input:focus { transform: scale(1.005); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12), 0 2px 8px rgba(168, 85, 247, 0.08); } .cx-alive-badge { transition: transform 0.15s var(--cx-spring-tension), box-shadow 0.15s var(--cx-ease); } .cx-alive-badge:hover { transform: scale(1.08) translateY(-1px); } .cx-alive-icon { transition: transform 0.2s var(--cx-spring-overshoot), color 0.15s var(--cx-ease); } .cx-alive-icon:hover { transform: scale(1.15) rotate(5deg); } /* ── Animated Counters/Numbers ── */ @keyframes cx-count-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .cx-animate-number { animation: cx-count-up 0.4s var(--cx-ease-out-expo) both; display: inline-block; } /* ── Ambient Particle/Dot Grid ── */ .cx-ambient-dots { background-image: radial-gradient(circle, rgba(168, 85, 247, 0.1) 1px, transparent 1px); background-size: 20px 20px; } .cx-ambient-grid { background-image: linear-gradient(rgba(168, 85, 247, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 85, 247, 0.05) 1px, transparent 1px); background-size: 24px 24px; } /* ── Scanner/Sweep Effect ── */ .cx-scanner-line { position: relative; overflow: hidden; } .cx-scanner-line::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cx-purple-400), transparent); animation: cx-scanner 3s ease-in-out infinite; } /* ═══════════════════════════════════════════════════════════════════ */ /* PROFESSIONAL POLISH PASS — FOCUS, ACCESSIBILITY, MICRO-INTERACTIONS */ /* ═══════════════════════════════════════════════════════════════════ */ /* ── Universal Focus Ring ── */ .cx-btn:focus-visible, .cx-input:focus-visible, .cx-select:focus-visible, .cx-toggle:focus-visible, .cx-pill:focus-visible, .cx-tab-btn:focus-visible, [role="button"]:focus-visible, button:focus-visible { outline: 2px solid var(--cx-purple-400); outline-offset: 2px; } /* ── Improved Input Transitions ── */ .cx-input, .cx-select, .cx-textarea { transition: border-color var(--cx-duration) var(--cx-ease), box-shadow var(--cx-duration) var(--cx-ease), background-color var(--cx-duration) var(--cx-ease); } .cx-input:focus, .cx-select:focus, .cx-textarea:focus { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15); } /* ── Button Professional Polish ── */ .cx-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .cx-btn:disabled { opacity: 0.5 !important; filter: grayscale(30%); cursor: not-allowed !important; pointer-events: auto; } .cx-btn:active:not(:disabled) { transform: scale(0.97); } /* ── Card Professional Hover ── */ .cx-card { transition: transform 0.2s var(--cx-ease), box-shadow 0.2s var(--cx-ease), border-color 0.2s var(--cx-ease); } .cx-card:hover { border-color: var(--cx-purple-500, rgba(168, 85, 247, 0.25)); } /* ── Smooth Scrollbar (Firefox) ── */ * { scrollbar-color: var(--cx-purple-700, #581c87) var(--cx-bg-surface, #1e1b2e); } /* ── Text Selection Branding ── */ ::selection { background: rgba(168, 85, 247, 0.4); color: #fff; } ::-moz-selection { background: rgba(168, 85, 247, 0.4); color: #fff; } /* ── Reduced Motion Safety ── */ @media (prefers-reduced-motion: reduce) { .cx-glow-pulse, .cx-dot-pulse, .cx-float, .cx-wiggle, .cx-bounce, .cx-spin, .cx-border-flow, .cx-animate-fade-up, .cx-animate-scale-in, .cx-marquee *, .cx-skeleton-pulse, .cx-typing-cursor { animation: none !important; } .cx-hover-lift:hover, .cx-hover-glow:hover { transform: none !important; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ── Ultra-Small Screen (375px / iPhone SE) ── */ @media (max-width: 375px) { .cx-sidebar { width: 240px !important; } .cx-cmd-palette-inner { width: 95vw !important; max-width: 95vw !important; } .cx-card { padding: 0.5rem !important; } .cx-card-base { padding: 0.5rem !important; } .cx-stat-card { padding: 0.375rem !important; } .cx-header { padding: 0.5rem !important; } .cx-tab-btn { padding: 0.25rem 0.5rem !important; font-size: 0.625rem !important; } .cx-btn { padding: 0.25rem 0.5rem !important; font-size: 0.625rem !important; } h1 { font-size: 1.25rem !important; } h2 { font-size: 1rem !important; } h3 { font-size: 0.875rem !important; } } /* ── Notification Toast Overflow Prevention ── */ .cx-notification-stack, .cx-toast-container { max-height: 80vh; overflow-y: auto; scrollbar-width: thin; } /* ── Command Palette Responsive ── */ .cx-cmd-palette-inner { width: clamp(280px, 90vw, 480px) !important; } /* ── DataGrid Mobile ── */ @media (max-width: 640px) { .cx-datagrid-row { flex-direction: column; gap: 0.25rem; padding: 0.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.1); } .cx-datagrid-cell { display: flex; justify-content: space-between; padding: 0.125rem 0; } .cx-datagrid-cell::before { content: attr(data-label); font-weight: 600; color: var(--cx-purple-300); margin-right: 0.5rem; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; } .cx-datagrid-header { display: none; } } /* ── Truncate With Fade Gradient ── */ .cx-truncate-fade { position: relative; overflow: hidden; white-space: nowrap; } .cx-truncate-fade::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 3rem; background: linear-gradient(to right, transparent, var(--cx-bg-surface, #1e1b2e)); pointer-events: none; } /* ── Enhanced Skeleton Pulse ── */ @keyframes cx-skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .cx-skeleton-pulse { animation: cx-skeleton-shimmer 2s ease-in-out infinite; background: linear-gradient(90deg, rgba(168, 85, 247, 0.08) 0%, rgba(168, 85, 247, 0.15) 40%, rgba(168, 85, 247, 0.08) 80% ); background-size: 200% 100%; } /* ── Professional Micro-interactions ── */ .cx-micro-pop:hover { transform: scale(1.05); } .cx-micro-pop:active { transform: scale(0.95); } .cx-micro-pop { transition: transform 0.15s var(--cx-ease); } .cx-subtle-glow:hover { box-shadow: 0 0 15px rgba(168, 85, 247, 0.15), 0 0 30px rgba(168, 85, 247, 0.05); } .cx-border-shimmer { position: relative; overflow: hidden; } .cx-border-shimmer::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--cx-purple-400), transparent); animation: cx-border-shimmer-slide 3s linear infinite; } @keyframes cx-border-shimmer-slide { to { left: 100%; } } /* ── Status Dot Animations ── */ .cx-status-dot-online { position: relative; } .cx-status-dot-online::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.4; animation: cx-status-ring 2s ease-out infinite; } @keyframes cx-status-ring { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(2); opacity: 0; } } /* ── Professional Badge Sizes ── */ .cx-badge-xs { padding: 0.0625rem 0.25rem; font-size: 0.5625rem; } .cx-badge-sm { padding: 0.125rem 0.375rem; font-size: 0.625rem; } .cx-badge-md { padding: 0.1875rem 0.5rem; font-size: 0.6875rem; } .cx-badge-lg { padding: 0.25rem 0.625rem; font-size: 0.75rem; } /* ── Drawer Responsive ── */ @media (max-width: 640px) { .cx-drawer { width: 100vw !important; max-width: 100vw !important; } } /* ── Breadcrumb Separator Enhancement ── */ .cx-breadcrumb-sep { color: var(--cx-purple-600); font-weight: bold; user-select: none; margin: 0 0.25rem; } /* ── Enhanced Accordion Animation ── */ .cx-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--cx-ease), opacity 0.25s var(--cx-ease); opacity: 0; } .cx-accordion-item.open .cx-accordion-content { max-height: 500px; opacity: 1; } /* ── Rating Stars Accessibility ── */ .cx-rating-star { cursor: pointer; transition: transform 0.15s ease, color 0.15s ease; } .cx-rating-star:hover { transform: scale(1.2); } .cx-rating-star:focus-visible { outline: 2px solid var(--cx-purple-400); outline-offset: 2px; border-radius: 2px; } /* ── Avatar Group Overflow Badge ── */ .cx-avatar-overflow { background: linear-gradient(135deg, var(--cx-purple-700), var(--cx-purple-900)); font-size: 0.5625rem; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid var(--cx-bg-surface); } /* ── Enhanced Link Styles ── */ .cx-link { color: var(--cx-purple-300); text-decoration: none; transition: color 0.15s ease; border-bottom: 1px solid transparent; } .cx-link:hover { color: var(--cx-purple-200); border-bottom-color: var(--cx-purple-400); } /* ── Loading Spinner Sizes ── */ .cx-spinner-xs { width: 0.75rem; height: 0.75rem; border-width: 1.5px; } .cx-spinner-sm { width: 1rem; height: 1rem; border-width: 2px; } .cx-spinner-md { width: 1.5rem; height: 1.5rem; border-width: 2px; } .cx-spinner-lg { width: 2rem; height: 2rem; border-width: 2.5px; } .cx-spinner-xl { width: 3rem; height: 3rem; border-width: 3px; } /* ── KBD (Keyboard Shortcut) Style ── */ .cx-kbd { display: inline-flex; align-items: center; justify-content: center; padding: 0.0625rem 0.375rem; font-family: var(--cx-font-mono); font-size: 0.625rem; background: var(--cx-bg-raised); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.25rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); color: var(--cx-purple-300); line-height: 1; min-width: 1.25rem; text-align: center; } /* ── Progress Bar Enhancements ── */ .cx-progress-bar { height: 0.375rem; border-radius: 9999px; background: var(--cx-bg-raised); overflow: hidden; } .cx-progress-fill { height: 100%; border-radius: 9999px; transition: width 0.5s var(--cx-ease); background: linear-gradient(90deg, var(--cx-purple-600), var(--cx-purple-400)); } .cx-progress-fill-animated { position: relative; } .cx-progress-fill-animated::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); animation: cx-progress-shine 2s ease-in-out infinite; } @keyframes cx-progress-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ── Dot Navigation ── */ .cx-dot-nav { display: flex; gap: 0.375rem; align-items: center; } .cx-dot-nav-item { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--cx-bg-raised); transition: all 0.2s var(--cx-ease); cursor: pointer; } .cx-dot-nav-item.active { width: 1.25rem; border-radius: 9999px; background: var(--cx-purple-500); } .cx-dot-nav-item:hover:not(.active) { background: var(--cx-purple-700); transform: scale(1.3); } /* ── Compact Chip Enhancements ── */ .cx-chip-compact { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.0625rem 0.375rem; font-size: 0.5625rem; border-radius: 9999px; border: 1px solid rgba(168, 85, 247, 0.2); background: var(--cx-bg-raised); color: var(--cx-purple-300); transition: all 0.15s ease; white-space: nowrap; } .cx-chip-compact:hover { border-color: var(--cx-purple-400); background: rgba(168, 85, 247, 0.1); } /* ── Divider Variants ── */ .cx-divider-gradient { height: 1px; background: linear-gradient(90deg, transparent, var(--cx-purple-500, rgba(168, 85, 247, 0.3)), transparent); border: none; } .cx-divider-dotted { border: none; border-top: 2px dotted rgba(168, 85, 247, 0.2); } .cx-divider-glow { height: 1px; background: var(--cx-purple-500, rgba(168, 85, 247, 0.4)); box-shadow: 0 0 8px rgba(168, 85, 247, 0.3); border: none; } /* ── Scroll Snap for Horizontal Cards ── */ .cx-scroll-snap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75rem; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; } .cx-scroll-snap > * { scroll-snap-align: start; flex-shrink: 0; } /* ── Pulse Dot (Live Indicator) ── */ .cx-pulse-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; position: relative; } .cx-pulse-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: cx-pulse-ring 1.5s ease-out infinite; } @keyframes cx-pulse-ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } } /* ── Container Query Card Sizes ── */ @container (max-width: 200px) { .cx-stat-card .cx-stat-value { font-size: 1rem; } .cx-stat-card .cx-stat-title { font-size: 0.5rem; } } @container (max-width: 150px) { .cx-stat-card { padding: 0.25rem; } .cx-stat-card .cx-stat-value { font-size: 0.875rem; } } /* ── Tooltip Arrow ── */ .cx-tooltip-arrow::after { content: ''; position: absolute; width: 6px; height: 6px; background: var(--cx-bg-raised); border: 1px solid rgba(168, 85, 247, 0.2); transform: rotate(45deg); } .cx-tooltip-arrow.top::after { bottom: -4px; left: 50%; margin-left: -3px; border-top: none; border-left: none; } .cx-tooltip-arrow.bottom::after { top: -4px; left: 50%; margin-left: -3px; border-bottom: none; border-right: none; } /* ── Hover Reveal Animation ── */ .cx-hover-reveal { overflow: hidden; } .cx-hover-reveal .cx-hover-reveal-content { transform: translateY(100%); opacity: 0; transition: all 0.25s var(--cx-ease); } .cx-hover-reveal:hover .cx-hover-reveal-content { transform: translateY(0); opacity: 1; } /* ── Empty State Pattern ── */ .cx-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; text-align: center; color: var(--cx-purple-300); opacity: 0.7; } .cx-empty-state-icon { font-size: 2rem; margin-bottom: 0.75rem; opacity: 0.5; } /* ── Notification Type Colors ── */ .cx-notification-success { border-left: 3px solid #22c55e; } .cx-notification-warning { border-left: 3px solid #eab308; } .cx-notification-error { border-left: 3px solid #ef4444; } .cx-notification-info { border-left: 3px solid #6366f1; } /* ── Step Indicator Enhancements ── */ .cx-step-completed { background: #22c55e; color: white; } .cx-step-active { background: var(--cx-purple-500); color: white; box-shadow: 0 0 8px rgba(168, 85, 247, 0.4); } .cx-step-pending { background: var(--cx-bg-raised); color: var(--cx-purple-300); opacity: 0.5; } /* ── Tag/Chip Remove Animation ── */ .cx-tag-remove { transition: all 0.15s ease; cursor: pointer; opacity: 0.6; } .cx-tag-remove:hover { opacity: 1; color: #ef4444; transform: scale(1.2); } /* ── Meter Threshold Colors ── */ .cx-meter-low { background: linear-gradient(90deg, #3b82f6, #60a5fa); } .cx-meter-medium { background: linear-gradient(90deg, #eab308, #fbbf24); } .cx-meter-high { background: linear-gradient(90deg, #ef4444, #f87171); } .cx-meter-safe { background: linear-gradient(90deg, #22c55e, #4ade80); } /* ── Count Badge Animation ── */ @keyframes cx-badge-pop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } .cx-count-badge { animation: cx-badge-pop 0.3s var(--cx-ease) forwards; } /* ── File Upload Drop Zone ── */ .cx-dropzone { border: 2px dashed rgba(168, 85, 247, 0.25); border-radius: 0.75rem; transition: all 0.2s ease; background: transparent; } .cx-dropzone:hover, .cx-dropzone.dragging { border-color: var(--cx-purple-400); background: rgba(168, 85, 247, 0.05); box-shadow: 0 0 20px rgba(168, 85, 247, 0.1); } /* ── Inline Edit ── */ .cx-inline-edit { cursor: text; border-bottom: 1px dashed transparent; transition: border-color 0.15s ease; padding: 0.125rem 0; } .cx-inline-edit:hover { border-bottom-color: var(--cx-purple-400); } .cx-inline-edit:focus-within { border-bottom-color: var(--cx-purple-300); border-bottom-style: solid; } /* ── Color Picker Swatch ── */ .cx-color-swatch { width: 1.75rem; height: 1.75rem; border-radius: 50%; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; border: 2px solid transparent; } .cx-color-swatch:hover { transform: scale(1.15); } .cx-color-swatch.selected { border-color: white; box-shadow: 0 0 0 2px var(--cx-purple-400), 0 0 8px rgba(168, 85, 247, 0.3); } /* ── Responsive Image/Media ── */ .cx-responsive-media { width: 100%; height: auto; border-radius: 0.5rem; object-fit: cover; } /* ── Skip Navigation (A11y) ── */ .cx-skip-nav { position: fixed; top: -100%; left: 1rem; z-index: 9999; padding: 0.5rem 1rem; background: var(--cx-purple-600); color: white; border-radius: 0 0 0.5rem 0.5rem; font-size: 0.75rem; transition: top 0.2s ease; } .cx-skip-nav:focus { top: 0; } /* ═══════════════════════════════════════════════════════════════════ ChaozCode Design System v2.0 — Extended Component Classes Added: Auth, E-commerce, Calendar, Social, File Management ═══════════════════════════════════════════════════════════════════ */ /* ── Auth & Login Components ── */ .cx-auth-card { max-width: 24rem; margin: 0 auto; padding: var(--cx-space-6); background: var(--cx-surface-1); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-xl); box-shadow: 0 0 40px rgba(168, 85, 247, 0.06); } .cx-auth-header { text-align: center; margin-bottom: var(--cx-space-5); } .cx-auth-header h1 { font-size: var(--cx-type-lg); color: var(--cx-text); font-weight: 700; } .cx-auth-header p { font-size: var(--cx-type-sm); color: var(--cx-text-muted); margin-top: var(--cx-space-1); } .cx-auth-divider { display: flex; align-items: center; gap: var(--cx-space-3); margin: var(--cx-space-4) 0; color: var(--cx-text-dim); font-size: var(--cx-type-xs); } .cx-auth-divider::before, .cx-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--cx-border); } .cx-social-login-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.625rem 1rem; border-radius: var(--cx-radius-md); border: 1px solid var(--cx-border); background: var(--cx-surface-2); color: var(--cx-text); font-size: var(--cx-type-sm); font-weight: 500; cursor: pointer; transition: all var(--cx-transition-fast); } .cx-social-login-btn:hover { border-color: var(--cx-accent); background: color-mix(in srgb, var(--cx-accent) 8%, transparent); } .cx-mfa-code { display: flex; gap: var(--cx-space-2); justify-content: center; } .cx-mfa-digit { width: 3rem; height: 3.5rem; text-align: center; font-size: var(--cx-type-xl); font-family: var(--cx-mono); background: var(--cx-surface-2); border: 2px solid var(--cx-border); border-radius: var(--cx-radius-md); color: var(--cx-text); transition: border-color var(--cx-transition-fast); } .cx-mfa-digit:focus { border-color: var(--cx-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 20%, transparent); outline: none; } .cx-password-strength { display: flex; gap: 0.25rem; height: 4px; margin-top: var(--cx-space-2); } .cx-password-strength-bar { flex: 1; border-radius: 2px; background: var(--cx-surface-3); transition: background var(--cx-transition-fast); } .cx-password-strength-bar.weak { background: var(--cx-danger); } .cx-password-strength-bar.fair { background: var(--cx-warning); } .cx-password-strength-bar.good { background: var(--cx-info); } .cx-password-strength-bar.strong { background: var(--cx-success); } .cx-session-item { display: flex; align-items: center; gap: var(--cx-space-3); padding: var(--cx-space-3); border-radius: var(--cx-radius-md); background: var(--cx-surface-1); border: 1px solid var(--cx-border); } .cx-session-item.current { border-color: var(--cx-accent); background: color-mix(in srgb, var(--cx-accent) 5%, var(--cx-surface-1)); } .cx-api-key { display: flex; align-items: center; gap: var(--cx-space-2); padding: var(--cx-space-2) var(--cx-space-3); background: var(--cx-surface-2); border-radius: var(--cx-radius-md); font-family: var(--cx-mono); font-size: var(--cx-type-xs); } .cx-api-key-value { flex: 1; color: var(--cx-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx-api-key-value.revealed { color: var(--cx-text); } .cx-permission-grid { display: grid; grid-template-columns: auto repeat(var(--cx-perm-cols, 4), 1fr); gap: 1px; background: var(--cx-border); border-radius: var(--cx-radius-md); overflow: hidden; } .cx-permission-cell { padding: var(--cx-space-2); background: var(--cx-surface-1); text-align: center; font-size: var(--cx-type-xs); } .cx-permission-cell.header { background: var(--cx-surface-2); font-weight: 600; color: var(--cx-text); } /* ── E-commerce Components ── */ .cx-product-card { background: var(--cx-surface-1); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); overflow: hidden; transition: all var(--cx-transition-base); } .cx-product-card:hover { border-color: var(--cx-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .cx-product-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--cx-surface-2); } .cx-product-badge { position: absolute; top: var(--cx-space-2); right: var(--cx-space-2); padding: 0.125rem 0.5rem; border-radius: var(--cx-radius-full); font-size: var(--cx-type-xs); font-weight: 600; } .cx-product-badge.sale { background: var(--cx-danger); color: white; } .cx-product-badge.new { background: var(--cx-accent); color: white; } .cx-product-badge.featured { background: var(--cx-warning); color: black; } .cx-price { font-size: var(--cx-type-lg); font-weight: 700; color: var(--cx-text); } .cx-price-old { font-size: var(--cx-type-sm); color: var(--cx-text-dim); text-decoration: line-through; margin-left: var(--cx-space-2); } .cx-rating-stars { display: flex; gap: 0.125rem; color: var(--cx-warning); } .cx-cart-item { display: flex; gap: var(--cx-space-3); padding: var(--cx-space-3); border-bottom: 1px solid var(--cx-border); } .cx-cart-item:last-child { border-bottom: none; } .cx-quantity-control { display: inline-flex; align-items: center; border: 1px solid var(--cx-border); border-radius: var(--cx-radius-md); overflow: hidden; } .cx-quantity-btn { padding: 0.375rem 0.75rem; background: var(--cx-surface-2); border: none; color: var(--cx-text); cursor: pointer; transition: background var(--cx-transition-fast); } .cx-quantity-btn:hover { background: var(--cx-surface-3); } .cx-quantity-value { padding: 0.375rem 0.75rem; min-width: 2.5rem; text-align: center; font-size: var(--cx-type-sm); color: var(--cx-text); background: var(--cx-surface-1); } .cx-pricing-card { padding: var(--cx-space-5); background: var(--cx-surface-1); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-xl); text-align: center; transition: all var(--cx-transition-base); } .cx-pricing-card.recommended { border-color: var(--cx-accent); box-shadow: 0 0 30px color-mix(in srgb, var(--cx-accent) 15%, transparent); position: relative; } .cx-pricing-card.recommended::before { content: 'Recommended'; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 0.25rem 1rem; background: var(--cx-accent); color: white; font-size: var(--cx-type-xs); font-weight: 600; border-radius: var(--cx-radius-full); } .cx-pricing-amount { font-size: var(--cx-type-hero); font-weight: 800; color: var(--cx-text); line-height: 1; } .cx-pricing-period { font-size: var(--cx-type-sm); color: var(--cx-text-dim); } .cx-invoice-status { font-size: var(--cx-type-xs); font-weight: 600; } .cx-invoice-paid { color: var(--cx-success); } .cx-invoice-pending { color: var(--cx-warning); } .cx-invoice-overdue { color: var(--cx-danger); } /* ── Calendar & Scheduling ── */ .cx-calendar { background: var(--cx-surface-1); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); overflow: hidden; } .cx-calendar-header { display: flex; align-items: center; justify-content: space-between; padding: var(--cx-space-3); background: var(--cx-surface-2); } .cx-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--cx-border); } .cx-calendar-day-header { padding: var(--cx-space-2); text-align: center; font-size: var(--cx-type-xs); font-weight: 600; color: var(--cx-text-dim); background: var(--cx-surface-1); } .cx-calendar-day { padding: var(--cx-space-2); min-height: 2.5rem; text-align: center; font-size: var(--cx-type-sm); background: var(--cx-surface-1); cursor: pointer; transition: all var(--cx-transition-fast); } .cx-calendar-day:hover { background: color-mix(in srgb, var(--cx-accent) 10%, var(--cx-surface-1)); } .cx-calendar-day.today { color: var(--cx-accent); font-weight: 700; } .cx-calendar-day.selected { background: var(--cx-accent); color: white; border-radius: var(--cx-radius-md); } .cx-calendar-day.range { background: color-mix(in srgb, var(--cx-accent) 15%, transparent); } .cx-calendar-day.other-month { color: var(--cx-text-dim); opacity: 0.4; } .cx-calendar-day.has-events::after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--cx-accent); margin: 2px auto 0; } .cx-event-strip { display: flex; align-items: center; gap: var(--cx-space-2); padding: var(--cx-space-2) var(--cx-space-3); border-radius: var(--cx-radius-md); border-left: 3px solid var(--cx-accent); background: color-mix(in srgb, var(--cx-accent) 8%, var(--cx-surface-1)); font-size: var(--cx-type-sm); } .cx-time-slot { padding: var(--cx-space-2) var(--cx-space-3); border-bottom: 1px solid var(--cx-border); min-height: 3rem; position: relative; } .cx-time-slot-label { position: absolute; left: 0; top: 0; font-size: var(--cx-type-xs); color: var(--cx-text-dim); padding: var(--cx-space-1); } /* ── Social & Activity ── */ .cx-profile-card { text-align: center; padding: var(--cx-space-5); background: var(--cx-surface-1); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-xl); } .cx-profile-banner { height: 6rem; background: linear-gradient(135deg, var(--cx-accent), color-mix(in srgb, var(--cx-accent) 40%, var(--cx-surface-3))); border-radius: var(--cx-radius-lg) var(--cx-radius-lg) 0 0; margin: calc(var(--cx-space-5) * -1); margin-bottom: -2rem; } .cx-profile-stats { display: flex; justify-content: center; gap: var(--cx-space-5); margin-top: var(--cx-space-4); } .cx-profile-stat-value { font-size: var(--cx-type-lg); font-weight: 700; color: var(--cx-text); } .cx-profile-stat-label { font-size: var(--cx-type-xs); color: var(--cx-text-dim); } .cx-post-card { padding: var(--cx-space-4); background: var(--cx-surface-1); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); } .cx-post-header { display: flex; align-items: center; gap: var(--cx-space-3); margin-bottom: var(--cx-space-3); } .cx-post-actions { display: flex; gap: var(--cx-space-4); padding-top: var(--cx-space-3); border-top: 1px solid var(--cx-border); margin-top: var(--cx-space-3); } .cx-post-action { display: flex; align-items: center; gap: var(--cx-space-1); color: var(--cx-text-muted); font-size: var(--cx-type-xs); cursor: pointer; transition: color var(--cx-transition-fast); } .cx-post-action:hover { color: var(--cx-accent); } .cx-post-action.liked { color: var(--cx-danger); } .cx-follow-btn { padding: 0.375rem 1rem; border-radius: var(--cx-radius-full); font-size: var(--cx-type-sm); font-weight: 600; cursor: pointer; transition: all var(--cx-transition-fast); } .cx-follow-btn.follow { background: var(--cx-accent); color: white; border: none; } .cx-follow-btn.following { background: transparent; color: var(--cx-accent); border: 1px solid var(--cx-accent); } .cx-follow-btn.following:hover { background: color-mix(in srgb, var(--cx-danger) 10%, transparent); border-color: var(--cx-danger); color: var(--cx-danger); } .cx-reaction-bar { display: flex; gap: 0.25rem; padding: 0.25rem; background: var(--cx-surface-2); border-radius: var(--cx-radius-full); border: 1px solid var(--cx-border); } .cx-reaction { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: var(--cx-radius-full); font-size: var(--cx-type-xs); cursor: pointer; transition: background var(--cx-transition-fast); } .cx-reaction:hover { background: var(--cx-surface-3); } .cx-reaction.active { background: color-mix(in srgb, var(--cx-accent) 15%, transparent); } .cx-contribution-grid { display: grid; grid-template-columns: repeat(52, 1fr); gap: 2px; } .cx-contribution-cell { width: 10px; height: 10px; border-radius: 2px; background: var(--cx-surface-2); } .cx-contribution-cell.level-1 { background: color-mix(in srgb, var(--cx-accent) 25%, var(--cx-surface-2)); } .cx-contribution-cell.level-2 { background: color-mix(in srgb, var(--cx-accent) 50%, var(--cx-surface-2)); } .cx-contribution-cell.level-3 { background: color-mix(in srgb, var(--cx-accent) 75%, var(--cx-surface-2)); } .cx-contribution-cell.level-4 { background: var(--cx-accent); } /* ── File Management ── */ .cx-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--cx-space-3); } .cx-file-card { display: flex; flex-direction: column; align-items: center; padding: var(--cx-space-3); background: var(--cx-surface-1); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); cursor: pointer; transition: all var(--cx-transition-fast); } .cx-file-card:hover { border-color: var(--cx-accent); background: color-mix(in srgb, var(--cx-accent) 5%, var(--cx-surface-1)); } .cx-file-card.selected { border-color: var(--cx-accent); background: color-mix(in srgb, var(--cx-accent) 10%, var(--cx-surface-1)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cx-accent) 30%, transparent); } .cx-file-icon { font-size: 2rem; margin-bottom: var(--cx-space-2); } .cx-file-name { font-size: var(--cx-type-xs); color: var(--cx-text); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .cx-file-meta { font-size: 0.625rem; color: var(--cx-text-dim); } .cx-upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 10rem; padding: var(--cx-space-5); border: 2px dashed var(--cx-border); border-radius: var(--cx-radius-xl); background: var(--cx-surface-1); cursor: pointer; transition: all var(--cx-transition-fast); } .cx-upload-zone:hover, .cx-upload-zone.drag-over { border-color: var(--cx-accent); background: color-mix(in srgb, var(--cx-accent) 5%, var(--cx-surface-1)); } .cx-upload-zone.drag-over { box-shadow: 0 0 20px color-mix(in srgb, var(--cx-accent) 15%, transparent); } .cx-storage-bar { height: 6px; background: var(--cx-surface-2); border-radius: var(--cx-radius-full); overflow: hidden; } .cx-storage-fill { height: 100%; border-radius: var(--cx-radius-full); background: linear-gradient(90deg, var(--cx-accent), color-mix(in srgb, var(--cx-accent) 60%, var(--cx-info))); transition: width var(--cx-transition-base); } .cx-storage-fill.warning { background: linear-gradient(90deg, var(--cx-warning), var(--cx-danger)); } .cx-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--cx-space-2); } .cx-gallery-item { position: relative; aspect-ratio: 1; border-radius: var(--cx-radius-md); overflow: hidden; cursor: pointer; } .cx-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cx-transition-base); } .cx-gallery-item:hover img { transform: scale(1.05); } .cx-gallery-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--cx-transition-fast); } .cx-gallery-item:hover .cx-gallery-overlay { opacity: 1; } /* ═══════════════════════════════════════════════════════════════ CX-* MICRO-UTILITIES — Design System ↔ Original Pattern Bridge Maps the most common hardcoded patterns to reusable tokens. These complete the token coverage for category file migration. ═══════════════════════════════════════════════════════════════ */ /* ── Pixel-precise text sizes (matching original component patterns) ── */ .cx-text-4xs { font-size: 0.4375rem; line-height: 0.625rem; } /* 7px — label micro */ .cx-text-micro { font-size: 0.5625rem; line-height: 0.75rem; } /* 9px — between 3xs and 2xs */ /* ── Background opacity variants (most common original patterns) ── */ .cx-bg-surface-40 { background-color: color-mix(in srgb, var(--cx-bg-surface) 40%, transparent); } .cx-bg-surface-50 { background-color: color-mix(in srgb, var(--cx-bg-surface) 50%, transparent); } .cx-bg-surface-60 { background-color: color-mix(in srgb, var(--cx-bg-surface) 60%, transparent); } .cx-bg-surface-80 { background-color: color-mix(in srgb, var(--cx-bg-surface) 80%, transparent); } .cx-bg-surface-90 { background-color: color-mix(in srgb, var(--cx-bg-surface) 90%, transparent); } .cx-bg-raised-40 { background-color: color-mix(in srgb, var(--cx-bg-raised) 40%, transparent); } .cx-bg-raised-50 { background-color: color-mix(in srgb, var(--cx-bg-raised) 50%, transparent); } .cx-bg-raised-60 { background-color: color-mix(in srgb, var(--cx-bg-raised) 60%, transparent); } .cx-bg-raised-80 { background-color: color-mix(in srgb, var(--cx-bg-raised) 80%, transparent); } /* ── Accent background opacities (bg-purple-500/N equivalents) ── */ .cx-accent-bg-5 { background-color: color-mix(in srgb, var(--cx-accent) 5%, transparent); } .cx-accent-bg-10 { background-color: color-mix(in srgb, var(--cx-accent) 10%, transparent); } .cx-accent-bg-15 { background-color: color-mix(in srgb, var(--cx-accent) 15%, transparent); } .cx-accent-bg-20 { background-color: color-mix(in srgb, var(--cx-accent) 20%, transparent); } .cx-accent-bg-30 { background-color: color-mix(in srgb, var(--cx-accent) 30%, transparent); } /* ── Border opacity scale (border-purple-500/N equivalents) ── */ .cx-border-5 { border: 1px solid color-mix(in srgb, var(--cx-accent) 5%, transparent); } .cx-border-10 { border: 1px solid color-mix(in srgb, var(--cx-accent) 10%, transparent); } .cx-border-15 { border: 1px solid color-mix(in srgb, var(--cx-accent) 15%, transparent); } .cx-border-20 { border: 1px solid color-mix(in srgb, var(--cx-accent) 20%, transparent); } .cx-border-25 { border: 1px solid color-mix(in srgb, var(--cx-accent) 25%, transparent); } .cx-border-30 { border: 1px solid color-mix(in srgb, var(--cx-accent) 30%, transparent); } .cx-border-40 { border: 1px solid color-mix(in srgb, var(--cx-accent) 40%, transparent); } /* ── Text accent opacity scale (text-purple-200/N + text-purple-300/N) ── */ .cx-text-accent-20 { color: color-mix(in srgb, var(--cx-text-primary) 20%, transparent); } .cx-text-accent-25 { color: color-mix(in srgb, var(--cx-text-primary) 25%, transparent); } .cx-text-accent-30 { color: color-mix(in srgb, var(--cx-text-primary) 30%, transparent); } .cx-text-accent-40 { color: color-mix(in srgb, var(--cx-text-primary) 40%, transparent); } .cx-text-accent-50 { color: color-mix(in srgb, var(--cx-text-primary) 50%, transparent); } .cx-text-accent-60 { color: color-mix(in srgb, var(--cx-text-primary) 60%, transparent); } .cx-text-accent-70 { color: color-mix(in srgb, var(--cx-text-primary) 70%, transparent); } .cx-text-accent-80 { color: color-mix(in srgb, var(--cx-text-primary) 80%, transparent); } .cx-text-dim-20 { color: color-mix(in srgb, var(--cx-text-muted) 40%, transparent); } .cx-text-dim-25 { color: color-mix(in srgb, var(--cx-text-muted) 50%, transparent); } .cx-text-dim-30 { color: color-mix(in srgb, var(--cx-text-muted) 60%, transparent); } .cx-text-dim-40 { color: color-mix(in srgb, var(--cx-text-muted) 70%, transparent); } .cx-text-dim-50 { color: color-mix(in srgb, var(--cx-text-muted) 80%, transparent); } .cx-text-dim-60 { color: color-mix(in srgb, var(--cx-text-muted) 90%, transparent); } .cx-text-dim-70 { color: var(--cx-text-muted); } /* ── Hover border transitions (hover:border-purple-500/N) ── */ .cx-hover-border-20:hover { border-color: color-mix(in srgb, var(--cx-accent) 20%, transparent); } .cx-hover-border-30:hover { border-color: color-mix(in srgb, var(--cx-accent) 30%, transparent); } .cx-hover-border-40:hover { border-color: color-mix(in srgb, var(--cx-accent) 40%, transparent); } /* ── Hover accent bg ── */ .cx-hover-accent-10:hover { background-color: color-mix(in srgb, var(--cx-accent) 10%, transparent); } .cx-hover-accent-15:hover { background-color: color-mix(in srgb, var(--cx-accent) 15%, transparent); } .cx-hover-accent-20:hover { background-color: color-mix(in srgb, var(--cx-accent) 20%, transparent); } /* ── Standard component wrapper (Sub/Wrap pattern from categories) ── */ .cx-section-label { font-size: 0.625rem; font-weight: 600; color: color-mix(in srgb, var(--cx-text-muted) 70%, transparent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; margin-top: 1rem; } .cx-section-label:first-child { margin-top: 0; } .cx-section-wrap { border-radius: var(--cx-radius-md); border: 1px solid var(--cx-border); background-color: color-mix(in srgb, var(--cx-bg-surface) 50%, transparent); padding: 0.75rem; } .cx-row-label { font-size: 0.625rem; color: color-mix(in srgb, var(--cx-text-primary) 40%, transparent); width: 5rem; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ CX ↔ OKLCH Bridge Layer Maps between design-system-variables.css (--primary-*, --bg-*) and chaozcode.css (--cx-*) so both systems resolve correctly. This enables gradual migration: pages can use either namespace. ═══════════════════════════════════════════════════════════════ */ :root { /* OKLCH → cx-* aliases (for apps that load design-system-variables.css) */ --cx-brand-primary: var(--primary-9, oklch(50% 0.17 265)); --cx-brand-secondary: var(--secondary-9, oklch(50% 0.18 300)); --cx-brand-gradient: var(--gradient-primary, linear-gradient(135deg, oklch(50% 0.17 265), oklch(50% 0.18 300))); --cx-color-success: var(--success, oklch(65% 0.18 145)); --cx-color-warning: var(--warning, oklch(75% 0.16 85)); --cx-color-danger: var(--danger, oklch(60% 0.22 25)); --cx-color-info: var(--info, oklch(65% 0.15 230)); /* cx-* → OKLCH aliases (for pages that expect --primary-* etc) */ --bg-surface: var(--cx-bg-surface, oklch(16% 0.008 265)); --bg-elevated: var(--cx-bg-raised, oklch(20% 0.01 265)); --text-primary: var(--cx-text-primary, oklch(95% 0.01 265)); --text-secondary: var(--cx-text-secondary, oklch(75% 0.02 265)); --text-muted: var(--cx-text-muted, oklch(55% 0.02 265)); --border-default: var(--cx-border, oklch(30% 0.03 265 / 0.5)); /* Shared layout tokens — same across both systems */ --cx-radius-sm: var(--radius-sm, 6px); --cx-radius-md: var(--radius-md, 10px); --cx-radius-lg: var(--radius-lg, 16px); --cx-radius-xl: var(--radius-xl, 24px); --cx-shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --cx-shadow-md: 0 4px 12px rgba(0,0,0,0.25); --cx-shadow-lg: 0 8px 32px rgba(0,0,0,0.3); --cx-transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1); --cx-transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1); } /* ═══════════════════════════════════════════════════════════════ Universal Component Classes — Safe on ALL pages These cx-* component classes work whether the page uses OKLCH vars, cx-* vars, or Tailwind. No conflicts. ═══════════════════════════════════════════════════════════════ */ /* Button — drop-in replacement for .btn on any page */ .cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 500; font-family: inherit; line-height: 1.5; border-radius: var(--cx-radius-md, 10px); border: 1px solid transparent; cursor: pointer; transition: all var(--cx-transition-fast); text-decoration: none; user-select: none; } .cx-btn:active { transform: scale(0.97); } .cx-btn-primary { background: var(--cx-brand-primary, oklch(50% 0.17 265)); color: #fff; box-shadow: 0 2px 10px color-mix(in srgb, var(--cx-brand-primary, #7c3aed) 30%, transparent); } .cx-btn-primary:hover { filter: brightness(1.1); box-shadow: 0 4px 20px color-mix(in srgb, var(--cx-brand-primary, #7c3aed) 40%, transparent); transform: translateY(-1px); } .cx-btn-secondary { background: color-mix(in srgb, var(--cx-text-primary, #fff) 6%, transparent); color: var(--cx-text-secondary, oklch(75% 0.02 265)); border-color: color-mix(in srgb, var(--cx-text-primary, #fff) 10%, transparent); } .cx-btn-secondary:hover { background: color-mix(in srgb, var(--cx-text-primary, #fff) 10%, transparent); color: var(--cx-text-primary, #fff); } .cx-btn-ghost { background: transparent; color: var(--cx-text-muted, oklch(55% 0.02 265)); } .cx-btn-ghost:hover { background: color-mix(in srgb, var(--cx-text-primary, #fff) 6%, transparent); color: var(--cx-text-primary, #fff); } .cx-btn-danger { background: color-mix(in srgb, var(--cx-color-danger, #ef4444) 15%, transparent); color: var(--cx-color-danger, #ef4444); border-color: color-mix(in srgb, var(--cx-color-danger, #ef4444) 30%, transparent); } .cx-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; } .cx-btn-lg { padding: 0.75rem 1.75rem; font-size: 1rem; } /* Card — universal glass panel */ .cx-card-universal { background: color-mix(in srgb, var(--cx-bg-raised, #1a1f38) 90%, transparent); border: 1px solid var(--cx-border, rgba(139,92,246,0.15)); border-radius: var(--cx-radius-lg, 16px); overflow: hidden; position: relative; } .cx-card-universal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.04) 70%, transparent); pointer-events: none; } /* Badge — universal inline tag */ .cx-badge-universal { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.6rem; font-size: 0.7rem; font-weight: 600; border-radius: 9999px; line-height: 1.4; } .cx-badge-success { background: color-mix(in srgb, var(--cx-color-success, #22c55e) 15%, transparent); color: var(--cx-color-success, #22c55e); } .cx-badge-danger { background: color-mix(in srgb, var(--cx-color-danger, #ef4444) 15%, transparent); color: var(--cx-color-danger, #ef4444); } .cx-badge-warning { background: color-mix(in srgb, var(--cx-color-warning, #eab308) 15%, transparent); color: var(--cx-color-warning, #eab308); } .cx-badge-info { background: color-mix(in srgb, var(--cx-color-info, #3b82f6) 15%, transparent); color: var(--cx-color-info, #3b82f6); } .cx-badge-primary { background: color-mix(in srgb, var(--cx-brand-primary, #7c3aed) 15%, transparent); color: var(--cx-brand-primary, #7c3aed); } .cx-badge-muted { background: color-mix(in srgb, var(--cx-text-muted, #64748b) 15%, transparent); color: var(--cx-text-muted, #64748b); } /* Input — universal text field */ .cx-input-universal { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-family: inherit; color: var(--cx-text-primary, #fff); background: color-mix(in srgb, var(--cx-bg-surface, #10152a) 80%, transparent); border: 1px solid var(--cx-border, rgba(139,92,246,0.15)); border-radius: var(--cx-radius-md, 10px); outline: none; transition: border-color var(--cx-transition-fast), box-shadow var(--cx-transition-fast); } .cx-input-universal:focus { border-color: var(--cx-brand-primary, oklch(50% 0.17 265)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-brand-primary, #7c3aed) 15%, transparent); } .cx-input-universal::placeholder { color: var(--cx-text-muted, oklch(55% 0.02 265)); } /* Section utilities — reusable layout blocks */ .cx-page-section { padding: clamp(2rem, 4vw, 4rem) 0; } .cx-section-header { margin-bottom: 2rem; } .cx-section-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; color: var(--cx-text-primary, #fff); line-height: 1.2; } .cx-section-subtitle { font-size: clamp(0.875rem, 1.5vw, 1.1rem); color: var(--cx-text-muted, oklch(55% 0.02 265)); margin-top: 0.5rem; line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════ User Preference Classes — Applied by ChaozShell from saved prefs These let any page respect the user's personalization settings. ═══════════════════════════════════════════════════════════════ */ /* ─── Compact Mode ─── */ [data-cx].cx-compact { font-size: 13px; line-height: 1.4; } .cx-compact .cx-card, .cx-compact .cx-panel, .cx-compact .cx-card-universal { padding: 0.5rem; } .cx-compact .cx-btn { padding: 0.35rem 0.75rem; font-size: 0.75rem; } .cx-compact .cx-page-section { padding: clamp(1rem, 2vw, 2rem) 0; } .cx-compact .cx-section-title { font-size: clamp(1.2rem, 2.5vw, 1.75rem); } /* ─── Reduce Motion ─── */ .cx-reduce-motion, .cx-reduce-motion * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { [data-cx], [data-cx] * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ─── High Contrast ─── */ .cx-high-contrast { --cx-text-primary: #ffffff; --cx-text-secondary: #e0e0e0; --cx-text-muted: #b0b0b0; --cx-border: rgba(255,255,255,0.25); --cx-bg-surface: #0c1020; --cx-bg-raised: #141830; } .cx-high-contrast .cx-btn-primary { border: 2px solid rgba(255,255,255,0.3); } .cx-high-contrast .cx-card-universal, .cx-high-contrast .cx-panel { border-width: 2px; border-color: rgba(255,255,255,0.2); } .cx-high-contrast a { text-decoration: underline; } /* ─── Border Radius Scales ─── */ .cx-radius-sharp { --cx-radius-sm: 2px; --cx-radius-md: 4px; --cx-radius-lg: 6px; --cx-radius-xl: 8px; } .cx-radius-rounded { --cx-radius-sm: 10px; --cx-radius-md: 16px; --cx-radius-lg: 24px; --cx-radius-xl: 32px; } .cx-radius-pill { --cx-radius-sm: 9999px; --cx-radius-md: 9999px; --cx-radius-lg: 9999px; --cx-radius-xl: 9999px; } /* ─── Animation Speed ─── */ .cx-anim-slow { --cx-transition-fast: 300ms cubic-bezier(0.16, 1, 0.3, 1); --cx-transition-normal: 500ms cubic-bezier(0.16, 1, 0.3, 1); } .cx-anim-fast { --cx-transition-fast: 80ms cubic-bezier(0.16, 1, 0.3, 1); --cx-transition-normal: 150ms cubic-bezier(0.16, 1, 0.3, 1); } /* ─── Code Font Families ─── */ .cx-font-cascadia { --cx-font-mono: 'Cascadia Code', 'Fira Code', monospace; } .cx-font-firacode { --cx-font-mono: 'Fira Code', 'Cascadia Code', monospace; } .cx-font-jetbrains { --cx-font-mono: 'JetBrains Mono', 'Fira Code', monospace; } .cx-font-mono { --cx-font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace; } .cx-font-inter { --cx-font-mono: 'Inter', system-ui, -apple-system, sans-serif; } /* ─── Color Blind Safe Palettes ─── */ .cx-cb-deuteranopia { --cx-color-success: #2196f3; /* blue instead of green */ --cx-color-danger: #ff9800; /* orange instead of red */ --cx-color-warning: #ffeb3b; /* bright yellow */ } .cx-cb-protanopia { --cx-color-success: #03a9f4; --cx-color-danger: #ffc107; --cx-color-warning: #ffeb3b; } .cx-cb-tritanopia { --cx-color-success: #4caf50; --cx-color-danger: #f44336; --cx-color-info: #e91e63; /* pink instead of blue */ } /* ─── Sidebar Position ─── */ .cx-sidebar-right { flex-direction: row-reverse; } .cx-sidebar-right .cx-sidebar { border-left: none; border-right: 1px solid var(--cx-border); } /* ─── Fullscreen Mode ─── */ /* Hide platform chrome (navbar header, footer) — but NOT app-internal

elements which are used for sidebar navigation inside React apps. The platform navbar is

, not a

. BUG FIX: ".cx-fullscreen nav" was hiding ALL

elements including sidebar navs inside #root, causing sidebar buttons to disappear. */ .cx-fullscreen .chaoz-nav-wrapper, .cx-fullscreen .chaoz-footer, .cx-fullscreen > footer, .cx-fullscreen > nav:not(#cx-navbar-nav), .cx-fullscreen > .chaoz-footer-inject { display: none !important; } /* cx-navbar stays visible in fullscreen — use compact mode instead */ /* App-internal navs (inside #root) must remain visible in fullscreen */ .cx-fullscreen #root nav { display: revert !important; } .cx-fullscreen #root, .cx-fullscreen main { min-height: 100vh; } /* ─── CX Theme Variants ─── */ /* Themes set CSS custom properties — apps pick them up automatically */ [data-cx-theme="midnight"] { --cx-bg-deep: #080818; --cx-bg-base: #0a0a22; --cx-bg-surface: #0e1030; --cx-bg-raised: #141840; --cx-accent: #6366f1; --cx-accent-glow: rgba(99, 102, 241, 0.3); --cx-purple-500: #818cf8; } [data-cx-theme="emerald"] { --cx-bg-deep: #021a0a; --cx-bg-base: #031f0e; --cx-bg-surface: #052e16; --cx-bg-raised: #083d20; --cx-accent: #10b981; --cx-accent-glow: rgba(16, 185, 129, 0.3); --cx-purple-500: #34d399; } [data-cx-theme="crimson"] { --cx-bg-deep: #1a0208; --cx-bg-base: #1f030a; --cx-bg-surface: #2e0510; --cx-bg-raised: #3d0818; --cx-accent: #ef4444; --cx-accent-glow: rgba(239, 68, 68, 0.3); --cx-purple-500: #f87171; } [data-cx-theme="amber"] { --cx-bg-deep: #1a1002; --cx-bg-base: #1f1403; --cx-bg-surface: #2e1e05; --cx-bg-raised: #3d2808; --cx-accent: #f59e0b; --cx-accent-glow: rgba(245, 158, 11, 0.3); --cx-purple-500: #fbbf24; } /* ─── User Accent Color Override ─── */ /* When --cx-user-accent is set by shell, it overrides the theme accent */ [style*="--cx-user-accent"] { --cx-accent: var(--cx-user-accent); --cx-accent-glow: color-mix(in srgb, var(--cx-user-accent) 30%, transparent); } /* ─── Z-Index Layer System ─── */ /* Shell layers must always be above app content */ :root { --cx-z-app: 1; --cx-z-dropdown: 100; --cx-z-sticky: 500; --cx-z-modal: 1000; --cx-z-toast: 5000; --cx-z-nav: 9999; --cx-z-shell: 10001; --cx-z-skip: 99999; } /* Cap app-level z-index so navbar/shell always wins */ [data-cx] .z-\[99999\], [data-cx] .z-\[99998\] { z-index: var(--cx-z-modal) !important; } /* ═══════════════════════════════════════════════════════════════════ Tailwind v4 @layer base Isolation Shield ───────────────────────────────────────────────────────────────── React apps (e.g. /auth/apps/v2/) use Tailwind CSS v4 which ships a global @layer base reset that strips ALL