/* ====================================================== Tensly CRM — Premium light theme Activated by on top of styles.css Single sans family (Geist), corporate editorial feel. ====================================================== */ body.theme-light { /* — Palette — */ --bg-0: #ffffff; --bg-1: #ffffff; --bg-2: #f8f7f3; /* warm cream — sidebar & subtle panels */ --bg-3: #f1f0eb; --bg-elev: #ffffff; --line: rgba(15,15,15,0.06); --line-2: rgba(15,15,15,0.10); --line-3: rgba(15,15,15,0.18); --text: #0e0e0f; --text-2: #3f4146; --text-3: #74767d; --text-4: #a5a6ac; --accent: #fe4444; --accent-2: #e23030; --accent-soft: rgba(254,68,68,0.07); --accent-line: rgba(254,68,68,0.22); --good: #1b8a5b; --good-soft: rgba(27,138,91,0.09); --warn: #b9851e; --warn-soft: rgba(185,133,30,0.10); --info: #2452c8; --info-soft: rgba(36,82,200,0.08); --shadow-1: 0 1px 2px rgba(15,15,15,0.04); --shadow-2: 0 6px 24px rgba(15,15,15,0.06), 0 1px 3px rgba(15,15,15,0.04); --shadow-pop: 0 24px 60px rgba(15,15,15,0.16), 0 4px 12px rgba(15,15,15,0.06); --sans: "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; background: var(--bg-0); color: var(--text); font-family: var(--sans); font-feature-settings: "ss01","ss03","cv11"; letter-spacing: -0.005em; } body.theme-light .mono { font-family: var(--mono); } /* — Scrollbars — */ body.theme-light ::-webkit-scrollbar-thumb { background: rgba(15,15,15,0.10); } body.theme-light ::-webkit-scrollbar-thumb:hover { background: rgba(15,15,15,0.18); } /* ========== SIDEBAR ========== */ body.theme-light .sidebar { background: var(--bg-2); border-right: 1px solid var(--line); } body.theme-light .sidebar .brand img, body.theme-light .login-art .logo img { filter: none; } body.theme-light .sidebar .brand .dot { box-shadow: 0 0 10px rgba(254,68,68,0.55); } body.theme-light .nav-item { color: var(--text-2); font-weight: 450; } body.theme-light .nav-item:hover { background: rgba(15,15,15,0.04); color: var(--text); } body.theme-light .nav-item.active { background: #ffffff; color: var(--text); box-shadow: 0 1px 0 rgba(15,15,15,0.03), inset 0 0 0 1px var(--line); font-weight: 500; } body.theme-light .nav-item.active::before { background: var(--accent); height: auto; top: 10px; bottom: 10px; } body.theme-light .nav-item .icon { color: var(--text-3); } body.theme-light .nav-item.active .icon { color: var(--text); } body.theme-light .nav-item .count { color: var(--text-4); } body.theme-light .nav-item .badge { background: var(--accent); color: #fff; } body.theme-light .section-label { color: var(--text-4); font-weight: 500; font-size: 10px; } body.theme-light .user-card { background: #fff; border: 1px solid var(--line); } body.theme-light .user-card .name { font-weight: 500; } body.theme-light .user-card button.signout { background: #fff; border-color: var(--line-2); color: var(--text-3); } body.theme-light .user-card button.signout:hover { color: var(--text); border-color: var(--line-3); } /* ========== TOPBAR ========== */ body.theme-light .topbar { background: #ffffff; border-bottom: 1px solid var(--line); height: 60px; padding: 0 26px; } body.theme-light .topbar .breadcrumb { color: var(--text-3); font-size: 12.5px; } body.theme-light .topbar .breadcrumb .crumb-current { color: var(--text); font-weight: 500; } body.theme-light .topbar .search { background: var(--bg-2); border-color: transparent; color: var(--text-3); height: 34px; } body.theme-light .topbar .search:focus-within { border-color: var(--line-2); background: #fff; } body.theme-light .topbar .search kbd { background: #fff; border-color: var(--line); color: var(--text-3); } body.theme-light .topbar .icon-btn { background: #fff; border-color: var(--line); color: var(--text-2); height: 34px; width: 34px; } body.theme-light .topbar .icon-btn:hover { background: var(--bg-2); border-color: var(--line-2); color: var(--text); } body.theme-light .topbar .icon-btn .pulse { box-shadow: 0 0 0 2px #fff; } body.theme-light .notif .notif-count { box-shadow: 0 0 0 2px #fff; } body.theme-light .notif-panel { background: #fff; border-color: var(--line-2); box-shadow: 0 18px 60px rgba(15, 17, 21, 0.10), 0 4px 14px rgba(15, 17, 21, 0.06); } body.theme-light .notif-item { border-bottom-color: var(--line); } body.theme-light .notif-item:hover { background: var(--bg-2); } body.theme-light .notif-item .ico { background: var(--bg-2); } /* ========== BUTTONS ========== */ body.theme-light .btn { background: #fff; border-color: var(--line-2); color: var(--text); font-weight: 500; letter-spacing: -0.005em; transition: all 140ms cubic-bezier(.22,.71,.36,1); } body.theme-light .btn:hover { background: var(--bg-2); border-color: var(--line-3); transform: translateY(-0.5px); } body.theme-light .btn.ghost { background: transparent; border-color: var(--line); color: var(--text-2); } body.theme-light .btn.ghost:hover { background: var(--bg-2); color: var(--text); } body.theme-light .btn.primary { background: #0e0e0f; border-color: #0e0e0f; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 1px 2px rgba(15,15,15,0.20), 0 4px 10px rgba(15,15,15,0.08); } body.theme-light .btn.primary:hover { background: #25252a; border-color: #25252a; } /* ========== CARDS ========== */ body.theme-light .card { background: #ffffff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,15,15,0.03); border-radius: 14px; } body.theme-light .card-h h3 { color: var(--text); font-weight: 500; font-size: 14px; letter-spacing: -0.01em; } body.theme-light .card-h .sub { color: var(--text-3); } /* ========== KPI cards — refined ========== */ body.theme-light .kpi { background: #ffffff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,15,15,0.03); border-radius: 14px; padding: 18px 20px; min-height: 138px; } body.theme-light .kpi .label { color: var(--text-3); font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; } body.theme-light .kpi .value { color: var(--text); font-family: var(--sans); font-weight: 500; font-size: 34px; letter-spacing: -0.025em; line-height: 1.05; } body.theme-light .kpi .value .unit { font-size: 14px; font-weight: 500; color: var(--text-3); letter-spacing: 0; } body.theme-light .kpi .delta { font-weight: 500; font-size: 11px; padding: 3px 8px; border-radius: 99px; } body.theme-light .kpi .delta.up { background: var(--good-soft); color: var(--good); } body.theme-light .kpi .delta.down { background: var(--accent-soft); color: var(--accent-2); } /* ========== PAGE HEADER ========== */ body.theme-light .page-title-row h1 { font-family: var(--sans); font-weight: 500; font-size: 28px; letter-spacing: -0.028em; color: var(--text); } body.theme-light .page-title-row .sub { color: var(--text-3); font-size: 13.5px; margin-top: 4px; } body.theme-light .page-body { padding: 28px 30px 90px; } body.theme-light .page-title-row { margin-bottom: 26px; } /* ========== TABLES ========== */ body.theme-light .tbl th { background: var(--bg-2); color: var(--text-3); border-bottom-color: var(--line); font-weight: 500; letter-spacing: 0.06em; font-size: 10.5px; text-transform: uppercase; padding: 11px 16px; } body.theme-light .tbl td { color: var(--text-2); border-bottom-color: var(--line); padding: 13px 16px; font-size: 13px; } body.theme-light .tbl td .pri { color: var(--text); font-weight: 500; } body.theme-light .tbl tr:hover td { background: var(--bg-2); } /* ========== TAGS ========== */ body.theme-light .tag { background: #fff; border-color: var(--line-2); color: var(--text-2); font-weight: 500; font-size: 11px; padding: 3px 9px; } body.theme-light .tag.good { background: var(--good-soft); color: var(--good); border-color: transparent; } body.theme-light .tag.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } body.theme-light .tag.bad { background: var(--accent-soft); color: var(--accent-2); border-color: transparent; } body.theme-light .tag.info { background: var(--info-soft); color: var(--info); border-color: transparent; } body.theme-light .tag.muted{ background: var(--bg-3); color: var(--text-3); border-color: transparent; } /* ========== AVATARS — pastel sourd ========== */ body.theme-light .avatar { background: var(--bg-3); border: 1px solid var(--line); box-shadow: none; font-weight: 600; } body.theme-light .av-1 { background: #e9eef7; color: #2e4d83; } body.theme-light .av-2 { background: #fae6e8; color: #a8313a; } body.theme-light .av-3 { background: #e3f1e8; color: #2a6e48; } body.theme-light .av-4 { background: #f6efdc; color: #826b2b; } body.theme-light .av-5 { background: #efe6f4; color: #66468c; } body.theme-light .av-6 { background: #e2eded; color: #336064; } body.theme-light .av-7 { background: #f4e7da; color: #875b2a; } body.theme-light .av-8 { background: #e9eaf3; color: #404780; } body.theme-light .bm-1 { background: #e9eef7; color: #2e4d83; } body.theme-light .bm-2 { background: #fae6e8; color: #a8313a; } body.theme-light .bm-3 { background: #e3f1e8; color: #2a6e48; } body.theme-light .bm-4 { background: #f6efdc; color: #826b2b; } body.theme-light .bm-5 { background: #efe6f4; color: #66468c; } body.theme-light .bm-6 { background: #e2eded; color: #336064; } body.theme-light .bm-7 { background: #f4e7da; color: #875b2a; } body.theme-light .bm-8 { background: #e9eaf3; color: #404780; } /* ========== FILTERS BAR ========== */ body.theme-light .filters { gap: 10px; margin-bottom: 18px; } body.theme-light .filters .seg { background: #fff; border-color: var(--line); border-radius: 8px; overflow: hidden; } body.theme-light .filters .seg button { color: var(--text-3); font-weight: 500; padding: 7px 14px; font-size: 12.5px; } body.theme-light .filters .seg button.on { background: #0e0e0f; color: #fff; } body.theme-light .filters .seg button + button { border-color: var(--line); } body.theme-light .filters .pill, body.theme-light .filters .search-input { background: #fff; border-color: var(--line); color: var(--text-2); height: 34px; border-radius: 8px; } body.theme-light .filters .pill:hover { border-color: var(--line-2); color: var(--text); } body.theme-light .filters .pill.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-2); } body.theme-light .filters .search-input::placeholder { color: var(--text-4); } body.theme-light .filters .search-input:focus { border-color: var(--text-3); } /* ========== FORMS ========== */ body.theme-light .field label { color: var(--text-2); font-weight: 500; font-size: 12.5px; } body.theme-light .field .input { background: #fff; border-color: var(--line-2); color: var(--text); height: 42px; border-radius: 9px; font-size: 14px; transition: border-color 120ms, box-shadow 120ms; } body.theme-light .field .input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } body.theme-light .field .input:disabled { background: var(--bg-2); } body.theme-light .field .hint { color: var(--text-3); } /* ========== KANBAN ========== */ body.theme-light .col { background: var(--bg-2); border-color: var(--line); border-radius: 14px; } body.theme-light .col-h { border-bottom: 1px solid var(--line); background: var(--bg-2); } body.theme-light .col-h .name { color: var(--text); font-weight: 500; } body.theme-light .col-h .count { background: #fff; color: var(--text-3); border: 1px solid var(--line); } body.theme-light .col-h .total { color: var(--text-3); } body.theme-light .deal { background: #ffffff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,15,15,0.02); border-radius: 10px; transition: all 140ms cubic-bezier(.22,.71,.36,1); } body.theme-light .deal:hover { box-shadow: 0 4px 16px rgba(15,15,15,0.08), 0 1px 2px rgba(15,15,15,0.04); border-color: var(--line-2); transform: translateY(-1px); } body.theme-light .deal .title { color: var(--text); font-weight: 500; } body.theme-light .deal .meta .amt { color: var(--text); font-weight: 600; } body.theme-light .deal .meta .ago { color: var(--text-3); } body.theme-light .deal .bar { background: var(--bg-3); } body.theme-light .deal .bar > i { background: var(--accent); } body.theme-light .col.drop-target .col-body { background: var(--accent-soft); } /* ========== CHAT ========== */ body.theme-light .chat-shell { background: #fff; border-color: var(--line); border-radius: 14px; } body.theme-light .chat-list { border-color: var(--line); } body.theme-light .chat-list .head, body.theme-light .chat-list .item { border-color: var(--line); } body.theme-light .chat-list .item:hover { background: var(--bg-2); } body.theme-light .chat-list .item.active { background: var(--bg-2); } body.theme-light .chat-list .item .nm { color: var(--text); font-weight: 500; } body.theme-light .chat-list .item .preview { color: var(--text-3); } body.theme-light .chat-list .item .ts { color: var(--text-4); } body.theme-light .chat-thread .head { border-color: var(--line); } body.theme-light .msg .bubble { background: var(--bg-2); border: 1px solid var(--line); color: var(--text); } body.theme-light .msg.me .bubble { background: #0e0e0f; color: #fff; border-color: transparent; } body.theme-light .chat-thread .composer { border-color: var(--line); } body.theme-light .chat-thread .composer input { background: var(--bg-2); border-color: var(--line); color: var(--text); } body.theme-light .chat-info { border-color: var(--line); } body.theme-light .chat-info h5 { color: var(--text-4); } body.theme-light .chat-info .kv .k { color: var(--text-3); } body.theme-light .chat-info .kv .v { color: var(--text); } /* ========== CALENDAR ========== */ body.theme-light .cal-grid { background: #fff; border-color: var(--line); border-radius: 14px; } body.theme-light .cal-grid .dow { background: var(--bg-2); border-color: var(--line); color: var(--text-3); font-weight: 500; font-size: 10.5px; } body.theme-light .cal-grid .day { background: #fff; border-color: var(--line); min-height: 118px; } body.theme-light .cal-grid .day.muted { background: var(--bg-2); color: var(--text-4); } body.theme-light .cal-grid .day .n { color: var(--text-2); font-weight: 500; } body.theme-light .cal-grid .day.today .n { background: var(--accent); color: #fff; } body.theme-light .cal-event { background: var(--bg-3); font-weight: 500; } body.theme-light .cal-event.r { background: var(--accent-soft); color: var(--accent-2); } body.theme-light .cal-event.b { background: var(--info-soft); color: var(--info); } body.theme-light .cal-event.g { background: var(--good-soft); color: var(--good); } body.theme-light .cal-event.y { background: var(--warn-soft); color: var(--warn); } /* ========== MODAL ========== */ body.theme-light .modal-veil { background: rgba(15,15,15,0.32); backdrop-filter: blur(8px); } body.theme-light .modal { background: #fff; border-color: var(--line-2); box-shadow: var(--shadow-pop); border-radius: 16px; } body.theme-light .modal h3 { font-weight: 500; letter-spacing: -0.015em; } body.theme-light .modal-h, body.theme-light .modal-f { border-color: var(--line); } body.theme-light .modal .x { background: #fff; border-color: var(--line); color: var(--text-3); } body.theme-light .modal .x:hover { background: var(--bg-2); color: var(--text); } /* ========== TOAST ========== */ body.theme-light .toast { background: #fff; border-color: var(--line-2); color: var(--text); box-shadow: var(--shadow-pop); } body.theme-light .toast .ico { color: var(--accent); } /* ========== LOGIN ========== */ body.theme-light .login-shell { background: #fff; } body.theme-light .login-art { background: radial-gradient(80% 60% at 100% 0%, rgba(254,68,68,0.10), transparent 60%), radial-gradient(40% 50% at 0% 100%, rgba(254,68,68,0.04), transparent 60%), linear-gradient(180deg, #faf9f5 0%, #efeee8 100%); border-right: 1px solid var(--line); } body.theme-light .login-art .grid-bg { background-image: linear-gradient(rgba(15,15,15,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15,15,15,0.05) 1px, transparent 1px); mask-image: radial-gradient(80% 80% at 30% 70%, #000 35%, transparent 75%); } body.theme-light .login-art .quote .eyebrow { color: var(--text-3); font-weight: 500; } body.theme-light .login-art .quote h2 { color: var(--text); font-family: var(--sans); font-weight: 500; font-size: 44px; line-height: 1.1; letter-spacing: -0.03em; } body.theme-light .login-art .quote h2 em { color: var(--accent); font-style: normal; font-weight: 500; } body.theme-light .login-art .quote p { color: var(--text-3); } body.theme-light .login-art .quote .author { color: var(--text-3); } body.theme-light .login-form-inner h1 { font-family: var(--sans); font-weight: 500; font-size: 30px; letter-spacing: -0.025em; } body.theme-light .login-form .sub { color: var(--text-3); } body.theme-light .suggested { border-color: var(--line-2); background: var(--bg-2); border-style: solid; border-radius: 12px; } body.theme-light .suggested .head { color: var(--text-4); font-weight: 500; } body.theme-light .suggested .row:hover { background: #fff; } body.theme-light .suggested .row .nm { color: var(--text); font-weight: 500; } body.theme-light .suggested .row .rl { color: var(--text-3); } body.theme-light .suggested .row .arrow { color: var(--text-4); } /* Primary CTA on login = red accent (signature moment) */ body.theme-light .login-form .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 6px 16px rgba(254,68,68,0.28); } body.theme-light .login-form .btn.primary:hover { background: #ff5757; } body.theme-light .checkrow { color: var(--text-2); } /* ========== MISC ========== */ body.theme-light .empty { color: var(--text-3); } body.theme-light .divider { background: var(--line); } body.theme-light .brand-mark { font-weight: 700; } /* Subtle hover lift on data cards */ body.theme-light .grid > .card { transition: box-shadow 140ms, transform 140ms; } /* Progress bars cleaner */ body.theme-light .progress-track { background: var(--bg-3); } /* Tabular numbers — use Geist tnum */ body.theme-light .tnum { font-variant-numeric: tabular-nums; }