/* ============================================================ FitActo Coach — "Coach Workspace" theme (dark + light) Colors flow through CSS variables so toggling the `.dark` class on re-skins the whole shell instantly. --ink is an RGB triplet (white on dark, navy on light) used for all text/border/surface overlays via rgba(var(--ink), a). ============================================================ */ :root { /* LIGHT theme (default when has no .dark) */ --ink: 28, 31, 58; --bg: #eef0f7; --bg-deep: #ffffff; /* sidebar */ --card: #ffffff; /* surfaces / cards */ --card-2: #f1f3fa; /* nested surfaces */ --topbar: rgba(255, 255, 255, .82); --text: #15182b; /* primary text */ --avatar-text: #5257bd; --on-accent: #06081C; /* text on the orange accent (same both modes) */ --orange: #F2A01E; --orange-hi: #ffb030; --green: #4FB995; --red: #F0726F; --red-text: #C0392B; /* readable red on light card tints */ --indigo: #7C80D8; --indigo-soft: #5257bd; --line-strong: rgba(28, 31, 58, .16); } html.dark { /* DARK theme */ --ink: 255, 255, 255; --bg: #0B0D24; --bg-deep: #06081C; --card: #1A1D45; --card-2: #15183A; --topbar: rgba(11, 13, 36, .85); --text: #ffffff; --avatar-text: #aeb1ec; --on-accent: #06081C; --indigo-soft: #aeb1ec; --red-text: #f3a3a1; /* pale red reads well on dark card tints */ --line-strong: rgba(255, 255, 255, .12); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); } body { /* emoji fonts before system-ui so ✨/📸/🎉 render in colour instead of tofu boxes */ font-family: 'IBM Plex Sans Thai', 'IBM Plex Sans', 'Kanit', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--text); transition: background .25s ease, color .25s ease; } .mono { font-family: 'IBM Plex Mono', monospace; } /* ---- scrollbars ---- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(var(--ink), .18); border-radius: 6px; } ::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(var(--ink), .22); border-radius: 20px; } .custom-scrollbar:hover::-webkit-scrollbar-thumb { background-color: rgba(var(--ink), .35); } input, select, textarea { font-family: inherit; } /* ---- animations ---- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp .5s ease-out forwards; opacity: 0; } .page-fade { animation: fadeUp .28s ease-out both; } /* ---- loading spinner ---- */ .loading-spinner { width: 34px; height: 34px; border: 3px solid rgba(var(--ink), .15); border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ Reusable FitActo helper classes (hover states the inline design markup can't express). All theme-aware via --ink. ============================================================ */ .fa-navlink { transition: background .15s ease, color .15s ease; } .fa-navlink:hover { background: rgba(var(--ink), .06) !important; color: var(--text) !important; } .fa-card { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .fa-card.clickable { cursor: pointer; } .fa-card.clickable:hover { border-color: rgba(242, 160, 30, .45) !important; } .fa-btn { transition: background .15s ease, opacity .15s ease, filter .15s ease; cursor: pointer; } .fa-btn-primary:hover { background: var(--orange-hi) !important; } .fa-iconbtn { transition: background .15s ease, color .15s ease, border-color .15s ease; cursor: pointer; } .fa-iconbtn:hover { background: rgba(var(--ink), .07) !important; color: var(--text) !important; } .fa-row { transition: background .12s ease; } .fa-row:hover { background: rgba(var(--ink), .045) !important; } .fa-link { cursor: pointer; transition: opacity .15s ease; } .fa-link:hover { opacity: .72; } .fa-input::placeholder { color: rgba(var(--ink), .4); } /* logout button */ .fa-logout { transition: background .15s ease, color .15s ease, border-color .15s ease; cursor: pointer; } .fa-logout:hover { color: var(--red) !important; border-color: rgba(240, 114, 111, .45) !important; background: rgba(240, 114, 111, .1) !important; } /* leads drag */ .fa-lead { transition: transform .12s ease, box-shadow .12s ease; } .fa-lead:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .fa-lead.dragging { opacity: .45; } .fa-leadcol.dragover { outline: 2px dashed rgba(242, 160, 30, .5); outline-offset: 4px; border-radius: 12px; } /* ============================================================ Modals: the existing markup uses Tailwind dark: classes. In LIGHT mode we let Tailwind paint them (bg-white / gray text). In DARK mode these scoped overrides re-skin them to navy. ============================================================ */ .modal { display: none; position: fixed; z-index: 1500; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(3, 4, 14, .55); backdrop-filter: blur(5px); } .dark .modal .modal-content { background: var(--card) !important; color: #fff !important; } .dark .modal .bg-gray-50, .dark .modal .dark\:bg-gray-700, .dark .modal .dark\:bg-gray-700\/50 { background-color: var(--card-2) !important; } .dark .modal .bg-gray-100, .dark .modal .dark\:bg-gray-900, .dark .modal .dark\:bg-gray-900\/50 { background-color: var(--bg) !important; } .dark .modal .bg-blue-50 { background-color: rgba(124, 128, 216, .12) !important; } .dark .modal .text-blue-700 { color: var(--indigo-soft) !important; } .dark .modal input, .dark .modal select, .dark .modal textarea { background-color: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .12) !important; color: #fff !important; } .dark .modal input::placeholder, .dark .modal textarea::placeholder { color: rgba(255, 255, 255, .35) !important; } /* native