/* ═══════════════════════════════════════════════════════ TRAK Design System — trak-theme.css Link this in every page's AFTER other styles ═══════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=DM+Mono:wght@400;500&display=swap'); /* ── Design tokens ──────────────────────────────────── */ :root { --bg: #eeeae3; --surface: #ffffff; --surface2: #f8f5f0; --border: #e3ddd5; --border2: #cec8be; --text: #18150f; --text2: #6a6158; --text3: #a09890; --accent: #15622f; --accent-hover: #187a39; --accent-dark: #0c3d1c; --accent-light: #d9f5e3; --accent-text: #0f4d24; --accent-border: #7bdeaa; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow-sm: 0 1px 3px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04); --shadow: 0 3px 12px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04); --shadow-lg: 0 8px 28px rgba(0,0,0,.11), 0 3px 10px rgba(0,0,0,.05); --shadow-xl: 0 16px 48px rgba(0,0,0,.14), 0 6px 18px rgba(0,0,0,.07); } /* ── Global ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: var(--bg) !important; background-image: radial-gradient(ellipse 70% 40% at 15% -5%, rgba(21,98,47,.06) 0%, transparent 55%), radial-gradient(ellipse 60% 35% at 90% 105%, rgba(21,98,47,.04) 0%, transparent 50%); background-attachment: fixed; color: var(--text) !important; } /* ── Header ─────────────────────────────────────────── */ .header { background: linear-gradient(130deg, #0a3019 0%, #134f29 45%, #1a7038 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 20px rgba(0,0,0,.22) !important; padding: 0 1.25rem !important; height: 62px; border-bottom: none !important; } .header-brand { gap: 12px !important; } .header-icon { width: 36px !important; height: 36px !important; background: rgba(255,255,255,.14) !important; border-radius: 10px !important; font-size: 17px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 3px rgba(0,0,0,.2) !important; flex-shrink: 0; } .header h1 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; } .header p { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 11px !important; opacity: .6 !important; letter-spacing: .01em !important; } /* ── Nav tabs — pill style ───────────────────────────── */ .page-tabs { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; padding: 0 10px !important; gap: 2px !important; top: 62px !important; } .page-tab { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--text2) !important; padding: 8px 13px !important; margin: 6px 0 !important; border-radius: 8px !important; border-bottom: none !important; transition: background .14s, color .14s !important; white-space: nowrap; } .page-tab:hover { background: var(--surface2) !important; color: var(--text) !important; } .page-tab.active { background: var(--accent-light) !important; color: var(--accent-text) !important; font-weight: 700 !important; border-bottom: none !important; box-shadow: inset 0 0 0 1.5px var(--accent-border) !important; } /* ── Stat cards ──────────────────────────────────────── */ .stat { border-radius: var(--radius-lg) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important; transition: box-shadow .18s, transform .18s !important; background: var(--surface) !important; } .stat:hover { box-shadow: var(--shadow) !important; transform: translateY(-2px) !important; } .stat-label { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--text3) !important; } .stat-value { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.15 !important; } /* ── Table / card surfaces ───────────────────────────── */ .table-card { border-radius: var(--radius-lg) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden !important; } .toolbar { border-radius: var(--radius-lg) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important; background: var(--surface) !important; } /* ── Table typography ────────────────────────────────── */ th { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .06em !important; color: var(--text3) !important; background: var(--surface2) !important; } td { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; color: var(--text) !important; } /* ── Primary buttons ─────────────────────────────────── */ .btn-add { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; border-radius: 9px !important; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important; box-shadow: 0 2px 8px rgba(21,98,47,.28), 0 1px 2px rgba(0,0,0,.1) !important; letter-spacing: .01em !important; transition: box-shadow .16s, transform .14s !important; } .btn-add:hover { opacity: 1 !important; box-shadow: 0 4px 16px rgba(21,98,47,.38), 0 2px 4px rgba(0,0,0,.12) !important; transform: translateY(-1px) !important; } .btn-add:active { transform: translateY(0) !important; box-shadow: 0 1px 4px rgba(21,98,47,.22) !important; } /* ── Pipeline board cards ────────────────────────────── */ .kb-card { border-radius: 11px !important; border: 1.5px solid var(--border) !important; box-shadow: var(--shadow-xs) !important; transition: box-shadow .16s, transform .13s !important; background: var(--surface) !important; } .kb-card:hover { box-shadow: var(--shadow) !important; transform: translateY(-2px) !important; } .kb-card-name { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: .01em !important; } .kb-chip { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 10px !important; font-weight: 600 !important; background: var(--surface2) !important; border: 1px solid var(--border) !important; color: var(--text2) !important; border-radius: 6px !important; padding: 2px 7px !important; } /* ── Pipeline column headers ─────────────────────────── */ .kb-col { border-radius: 13px !important; border: 1.5px solid rgba(0,0,0,.07) !important; box-shadow: 0 2px 8px rgba(0,0,0,.04) !important; } .kb-col-title { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .07em !important; } .kb-col-count { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; } /* ── Notes cards ─────────────────────────────────────── */ .note-card { border-radius: 12px !important; border: 1.5px solid var(--border) !important; box-shadow: var(--shadow-xs) !important; transition: box-shadow .16s, transform .14s !important; } .note-card:hover { box-shadow: var(--shadow) !important; transform: translateY(-2px) !important; } .nc-name { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 800 !important; font-size: 13px !important; letter-spacing: .01em !important; } .nc-chip { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 600 !important; font-size: 10px !important; background: rgba(0,0,0,.06) !important; border-radius: 6px !important; } /* ── Filter pills ────────────────────────────────────── */ .pill { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 600 !important; font-size: 12px !important; border-radius: 20px !important; transition: all .14s !important; } .pill.active { box-shadow: 0 2px 8px rgba(21,98,47,.2) !important; } /* ── Modals ──────────────────────────────────────────── */ .modal, .overlay .modal { border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-xl) !important; border: 1px solid var(--border) !important; } .mhdr { border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important; } /* ── Inputs & selects ────────────────────────────────── */ input, select, textarea { font-family: 'Plus Jakarta Sans', sans-serif !important; } input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(21,98,47,.1) !important; outline: none !important; } /* ── Badges ──────────────────────────────────────────── */ .badge, .nc-status { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; letter-spacing: .01em !important; } /* ── Toast ───────────────────────────────────────────── */ .toast { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 600 !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0,0,0,.2) !important; letter-spacing: .01em !important; } /* ── Toolbar inputs ──────────────────────────────────── */ .toolbar input, .toolbar select { border-radius: 9px !important; background: var(--bg) !important; } .toolbar input:focus, .toolbar select:focus { background: white !important; } /* ── Misc ────────────────────────────────────────────── */ .btn-wa, .mc-btn-wa { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; border-radius: 9px !important; } .btn-edit, .btn-del, .btn-lark { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 600 !important; } /* Smooth scrollbars */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text3); } /* Selection colour */ ::selection { background: var(--accent-light); color: var(--accent-dark); }