/* TiAuto CRM Design System – core tokens + layout Adapted for WordPress theme usage */ /* Root design tokens (based on your theme.css) */ :root { --font-size-base: 16px; /* Softer blue-grey app background */ --background: #f5f7fd; --foreground: #050827; --surface: #ffffff; --surface-alt: #f7f8ff; --surface-elevated: #ffffff; --card: #ffffff; --card-foreground: #050827; --popover: #ffffff; --popover-foreground: #050827; /* Tailwind-ish defaults */ --tw-shadow-color: rgb(0 0 0 / 0.1); --tw-inset-shadow: 0 0 #0000; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; /* TiAuto CRM accents */ --primary: #101828; /* main text / strong */ --primary-foreground: #ffffff; --secondary: #f2f4ff; --secondary-foreground: #101828; --muted: #e4e7f5; --muted-foreground: #7683a7; --accent: #f4f6ff; --accent-foreground: #101828; --destructive: #ff4b4b; --destructive-foreground: #ffffff; /* Sidebar + borders */ --border-subtle: #e1e4f2; --border-strong: #c8cde5; --input: #e1e4f2; --ring: #5885ff; --sidebar-bg: #fafbff; --sidebar-fg: #242b4a; --sidebar-primary: #ff4b4b; /* active pill background */ --sidebar-primary-soft: #f0f2ff; /* light red pill */ --sidebar-primary-foreground: #f5821f; --sidebar-accent: #f0f2ff; --sidebar-accent-foreground: #242b4a; --sidebar-border: #e1e4f2; --sidebar-ring: #5885ff; --radius-sm: 0.4rem; --radius: 0.75rem; --radius-lg: 0.9rem; --radius-xl: 1.5rem; --shadow-soft: 0 18px 45px rgba(5, 8, 39, 0.12); --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.1rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 0.75rem; --spacing-lg: 1rem; --spacing-xl: 1.5rem; --spacing-2xl: 2rem; --container-max: 88rem; } /* Dark mode variant hook (if you later add .dark on ) */ .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.175 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.175 0 0); --popover-foreground: oklch(0.985 0 0); --muted: oklch(0.32 0 0); --muted-foreground: oklch(0.77 0 0); --accent: oklch(0.26 0 0); --accent-foreground: oklch(0.985 0 0); --border-subtle: oklch(0.26 0 0); --border-strong: oklch(0.4 0 0); --input: oklch(0.26 0 0); --sidebar-bg: oklch(0.145 0 0); --sidebar-fg: oklch(0.985 0 0); } /* Global reset-ish */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--font-size-base); } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; background-color: var(--background); color: var(--foreground); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Links */ a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: none; } /* Headings */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--spacing-sm); color: var(--foreground); font-weight: var(--font-weight-semibold); } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } /* Utility container */ .crm-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: var(--spacing-xl) var(--spacing-lg); } /* Main content wrapper */ .crm-main { min-height: calc(100vh - 4rem - 3rem); background: var(--background); } /* Header (CRM top bar) */ .crm-header { height: 4rem; padding: 0 1.75rem; border-bottom: 1px solid var(--border-subtle); background-color: #ffffff; display: flex; align-items: center; justify-content: space-between; /* Tailwind-style shadow stack from your design system */ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } /* Header left (logo + text) */ .crm-header-left { display: flex; align-items: center; gap: var(--spacing-md); } .crm-header-logo-link { display: inline-flex; align-items: center; gap: var(--spacing-sm); } .crm-header-logo { height: 3rem; width: auto; } .crm-header-logo-text { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--foreground); } /* Header right (user info + actions) */ .crm-header-right { display: flex; align-items: center; gap: var(--spacing-md); } .crm-header-login { font-size: var(--text-sm); color: var(--muted-foreground); } .crm-header-login:hover { color: var(--foreground); text-decoration: none; } .crm-header-user { display: flex; align-items: center; gap: var(--spacing-sm); } .crm-header-user-meta { text-align: right; } .crm-header-user-name { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--foreground); } .crm-header-user-role { font-size: var(--text-xs); color: var(--muted-foreground); } .crm-header-user-avatar { height: 2.25rem; width: 2.25rem; border-radius: 999px; background-color: var(--muted); color: var(--foreground); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); display: flex; align-items: center; justify-content: center; } .crm-header-logout { height: 2.25rem; width: 2.25rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background-color: transparent; color: var(--muted-foreground); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .crm-header-logout:hover { background-color: oklch(0.978 0.008 16.32); border-color: oklch(0.9 0 0); color: #b42318; } .crm-header-logout-icon { font-size: var(--text-lg); } /* Footer */ .crm-footer { border-top: 1px solid var(--border-subtle); background-color: #ffffff; padding: var(--spacing-md) var(--spacing-lg); } .crm-footer-inner { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); color: var(--muted-foreground); } .crm-footer-author { opacity: 0.8; } /* Page header + titles */ .crm-page-header { margin-bottom: var(--spacing-lg); } .crm-page-title { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); } .crm-page-subtitle { margin-top: var(--spacing-xs); font-size: var(--text-sm); color: var(--muted-foreground); } /* Articles / cards */ .crm-article, .crm-article-single, .crm-page { background-color: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); padding: var(--spacing-lg); box-shadow: 0 0 0 rgba(0, 0, 0, 0.02); } .crm-article + .crm-article { margin-top: var(--spacing-md); } .crm-article-header { margin-bottom: var(--spacing-sm); } .crm-article-title a { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--foreground); text-decoration: none; } .crm-article-title a:hover { color: var(--primary); } .crm-article-meta { margin-top: var(--spacing-xs); font-size: var(--text-xs); color: var(--muted-foreground); display: flex; align-items: center; gap: 0.25rem; } .crm-article-content { font-size: var(--text-sm); color: var(--foreground); } .crm-page-content, .crm-dashboard-content { font-size: var(--text-base); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.9rem; border-radius: 0.6rem; font-size: var(--text-sm); font-weight: var(--font-weight-medium); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .btn-primary { background-color: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-soft); } .btn-primary:hover { background-color: #151433; } .btn-outline { background-color: transparent; color: var(--foreground); border-color: var(--border-strong); } .btn-outline:hover { background-color: var(--surface-alt); } /* Empty states */ .crm-empty-state { text-align: center; padding: var(--spacing-xl); border-radius: var(--radius-lg); border: 1px dashed var(--border-subtle); background-color: var(--surface-alt); } .crm-empty-state h1, .crm-empty-state h2 { margin-bottom: var(--spacing-sm); } .crm-empty-state p { margin-bottom: var(--spacing-md); } /* Pagination */ .crm-pagination { margin-top: var(--spacing-lg); display: flex; justify-content: center; } /* CRM shell (sidebar + main) */ .crm-shell { display: flex; min-height: calc(100vh - 4rem - 3rem); background-color: var(--background); } /* Sidebar */ .crm-sidebar { width: 15.5rem; border-right: 1px solid var(--sidebar-border); background-color: var(--sidebar-bg); color: var(--sidebar-fg); position: sticky; top: 4rem; /* key part - stretch to footer naturally */ height: auto; align-self: stretch; /* allow scroll INSIDE sidebar if its content is taller */ overflow-y: auto; } .crm-sidebar-nav { padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; } .crm-sidebar-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; border-radius: 999px; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--sidebar-fg); text-decoration: none; border: 1px solid transparent; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease; } .crm-sidebar-link:hover { background-color: var(--sidebar-accent); color: var(--sidebar-accent-foreground); } .crm-sidebar-link.is-active { background-color: var(--sidebar-primary-soft); color: var(--sidebar-primary-foreground); border-color: transparent; } .crm-sidebar-icon { height: 1.3rem; width: 1.3rem; position: relative; } .crm-sidebar-label { white-space: nowrap; } /* Dashboard main area */ .crm-main-dashboard { flex: 1; padding: var(--spacing-xl); } .crm-dashboard-inner { max-width: var(--container-max); margin: 0 auto; } /* Hero section (front page) */ .crm-hero { margin-bottom: var(--spacing-xl); padding: var(--spacing-xl); border-radius: var(--radius-xl); background: radial-gradient(circle at top left, oklch(0.95 0.05 260) 0, #ffffff 55%); box-shadow: var(--shadow-soft); display: none !important; } .crm-hero-title { font-size: 2.25rem; margin-bottom: var(--spacing-sm); } .crm-hero-subtitle { font-size: var(--text-base); color: var(--muted-foreground); } /* Basic responsive tweaks */ @media (max-width: 960px) { .crm-footer-inner { flex-direction: column; gap: var(--spacing-xs); align-items: flex-start; } .crm-shell { flex-direction: column; } .crm-sidebar { position: relative; width: 100%; max-height: none; top: 0; border-right: 0; border-bottom: 1px solid var(--sidebar-border); } } .home header.crm-header { display: none; } header.crm-page-header { display: none; }