/* ===================================================================== Tasklio — Design System (Dark Mode) Tokens extracted 1:1 from the Figma file (Tasklio UI Kit). Zero build step: plain CSS custom properties + component classes. ===================================================================== */ /* ---- Font: Satoshi (Fontshare, free). Falls back to system sans. ---- */ @import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap"); :root { /* Surfaces (dark) */ --bg-page: #0b0c0d; /* canvas behind panels */ --bg-white-0: #111315; /* base card / panel */ --bg-weak-50: #181a1b; --bg-soft-200: #1a1d1f; /* popovers */ --bg-sub-300: #232426; /* elevated / hover */ --bg-sub-230: #393b3d; --bg-sub-250: #3f4141; --bg-strong-950: #ffffff; /* inverse (white buttons) */ --bg-black: #000000; /* Borders */ --stroke-soft-200: #2b303b; --stroke-sub-300: #525866; --stroke-white-0: #0e121b; /* Text */ --text-strong-950: #ffffff; --text-sub-600: #99a0ae; --text-soft-400: #868686; --text-white-0: #0e121b; /* on light surfaces */ /* Icons */ --icon-strong-950: #ffffff; --icon-sub-600: #99a0ae; --icon-soft-400: #717784; /* Accent scales (tags, priorities, charts) */ --red-300: #ff97a0; --red-a10: #fb37481a; --sky-500: #47c2ff; --sky-200: #c0eaff; --sky-a10: #47c2ff1a; --yellow-400: #ffd268; --yellow-300: #ffe097; --yellow-a10: #fbc64b1a; --orange-300: #ffba97; --pink-200: #ffc0df; --purple-200: #cac0ff; --green-200: #c2f5da; --lime-500: #dff589; /* Brand accent (Tasklio purple) */ --accent: #6c47ff; --accent-ink: #ffffff; /* Radius */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; /* Shadows */ --shadow-sm: 0 1px 2px #1018280f, 0 1px 3px #1018281a; --shadow-pop: 0 8px 30px #00000066; /* Typography */ --font-sans: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Big-heading gradient (theme-aware) */ --title-grad: linear-gradient(180deg, #ffffff 34%, #b4bac6); --grid-dot: #ffffff09; } [data-theme="light"] { --title-grad: linear-gradient(180deg, #14161a 34%, #49525f); --grid-dot: #14161a0d; } /* ---- Light theme (opt-in via ) ---- */ [data-theme="light"] { --bg-page: #f3f4f6; --bg-white-0: #ffffff; --bg-weak-50: #f0f1f4; --bg-soft-200: #ffffff; --bg-sub-300: #eceef1; --bg-sub-230: #e2e5ea; --bg-sub-250: #d8dce2; --bg-strong-950: #17181a; /* inverse (dark) — for primary buttons */ --bg-black: #14161a; /* sidebar rail stays deep but not pure black */ --stroke-soft-200: #e6e8ec; --stroke-sub-300: #cdd2da; --stroke-white-0: #e6e8ec; --text-strong-950: #14161a; --text-sub-600: #5b6472; --text-soft-400: #8b9096; --text-white-0: #ffffff; /* inverse text — on dark buttons */ --icon-strong-950: #14161a; --icon-sub-600: #5b6472; --icon-soft-400: #9aa0a8; --shadow-sm: 0 1px 2px #10182814, 0 1px 3px #1018281f; --shadow-pop: 0 12px 40px #1018282e; } /* Light-mode focus ring is dark-tinted, not white */ [data-theme="light"] .input:focus { box-shadow: 0 0 0 3px #14161a12; } /* Keep the sidebar rail icons legible on the dark rail in light mode */ [data-theme="light"] .rail-item.is-active { background: #ffffff1f; color: #fff; } [data-theme="light"] .rail-item { color: #9aa0a8; } [data-theme="light"] .rail-item:hover { background: #ffffff14; color: #fff; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Soft cross-document page transitions (Chrome MPA) — no more abrupt "flash" */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out .18s ease both; } ::view-transition-new(root) { animation: vt-in .24s ease both; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } html, body { height: 100%; } body { font-family: var(--font-sans); background: var(--bg-page); color: var(--text-strong-950); font-size: 14px; line-height: 1.5; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } ul { list-style: none; } img, svg { display: block; max-width: 100%; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--bg-sub-300); border-radius: var(--r-full); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--bg-sub-230); background-clip: padding-box; } /* ---- Brand mark (shared: landing, auth, app) ---- */ .brand-mark { display: inline-grid; place-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); flex-shrink: 0; } .brand-mark svg { width: 19px; height: 19px; } .theme-ico { display: inline-flex; line-height: 0; } .theme-ico svg { width: 15px; height: 15px; } /* Base size for inline SVG icons (partials/icon.php outputs .ico) */ .ico { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex-shrink: 0; } /* ---- Typography helpers ---- */ .h4 { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; } .title { font-size: 18px; font-weight: 500; letter-spacing: -0.03em; } .muted { color: var(--text-sub-600); } .soft { color: var(--text-soft-400); } .tiny { font-size: 12px; } .small { font-size: 13px; } /* ---- Layout utilities (small, purposeful set) ---- */ .flex { display: flex; } .col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .grow { flex: 1; } .wrap { flex-wrap: wrap; } /* ===================================================================== Components ===================================================================== */ /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 40px; padding: 0 var(--s-4); border-radius: var(--r-md); font-weight: 500; font-size: 14px; letter-spacing: -0.02em; transition: background .15s ease, border-color .15s ease, opacity .15s ease; white-space: nowrap; } .btn-primary { background: var(--bg-strong-950); color: var(--text-white-0); } .btn-primary:hover { opacity: .9; } .btn-accent { background: linear-gradient(180deg, #8b6dff, var(--accent)); color: var(--accent-ink); box-shadow: 0 4px 14px #6c47ff33; } .btn-accent:hover { filter: brightness(1.06); box-shadow: 0 6px 22px #6c47ff4d; } /* Top navigation progress bar */ .nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 99999; pointer-events: none; background: linear-gradient(90deg, var(--accent), #8b6dff); box-shadow: 0 0 10px var(--accent); opacity: 0; border-radius: 0 2px 2px 0; } .nav-progress.active { opacity: 1; animation: navProg 1.8s cubic-bezier(.12,.72,.2,1) forwards; } @keyframes navProg { 0% { width: 0; } 20% { width: 38%; } 55% { width: 72%; } 100% { width: 94%; } } @media (prefers-reduced-motion: reduce) { .nav-progress.active { animation: none; width: 94%; } } .btn-ghost { background: var(--bg-white-0); color: var(--text-strong-950); border: 1px solid var(--stroke-soft-200); } .btn-ghost:hover { background: var(--bg-sub-300); } .btn-block { width: 100%; } .btn-sm { height: 32px; padding: 0 var(--s-3); font-size: 13px; } .btn-icon { width: 40px; padding: 0; } /* ---- Form fields ---- */ .field { display: flex; flex-direction: column; gap: var(--s-2); } .field > label { font-size: 14px; font-weight: 500; color: var(--text-sub-600); } .input { height: 44px; width: 100%; padding: 0 var(--s-4); background: var(--bg-white-0); border: 1px solid var(--stroke-soft-200); border-radius: var(--r-md); color: var(--text-strong-950); transition: border-color .15s ease, box-shadow .15s ease; } .input::placeholder { color: var(--text-soft-400); } .input:focus { outline: none; border-color: var(--stroke-sub-300); box-shadow: 0 0 0 3px #ffffff10; } .input.has-error { border-color: var(--red-300); } .error-text { color: var(--red-300); font-size: 12px; } /* ---- Cards & surfaces ---- */ .card { background: var(--bg-white-0); border: 1px solid var(--stroke-soft-200); border-radius: var(--r-lg); } /* ---- Badges / tags (priority & labels) ---- */ .tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: var(--r-full); font-size: 12px; font-weight: 500; background: var(--bg-sub-300); color: var(--text-sub-600); } .tag-high { background: var(--red-a10); color: var(--red-300); } .tag-medium { background: var(--sky-a10); color: var(--sky-500); } .tag-low { background: var(--yellow-a10); color: var(--yellow-400); } .tag-ux { color: var(--purple-200); background: #cac0ff1a; } .tag-wire { color: var(--lime-500); background: #dff5891a; } .tag-copy { color: var(--sky-200); background: var(--sky-a10); } /* ---- Avatars ---- */ .avatar { width: 28px; height: 28px; border-radius: var(--r-full); object-fit: cover; border: 2px solid var(--bg-white-0); background: var(--bg-sub-300); } .avatar-stack { display: flex; } .avatar-stack .avatar + .avatar { margin-left: -8px; } .avatar-more { width: 28px; height: 28px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; background: var(--bg-sub-300); color: var(--text-sub-600); border: 2px solid var(--bg-white-0); margin-left: -8px; } /* ---- Progress bar ---- */ .progress { height: 6px; border-radius: var(--r-full); background: var(--bg-sub-300); overflow: hidden; } .progress > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; } /* ---- Pricing cards (shared: landing + billing) ---- */ .lp-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 auto; } .lp-plan { position: relative; background: var(--bg-white-0); border: 1px solid var(--stroke-soft-200); border-radius: var(--r-xl); padding: 28px 24px; display: flex; flex-direction: column; gap: 6px; } .lp-plan.is-popular { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 20px 60px #6c47ff14; } .lp-plan.is-current { border-color: var(--green-200); } .lp-plan h3 { font-size: 20px; font-weight: 600; } .lp-plan-badge { position: absolute; top: -11px; left: 24px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-full); } .lp-price { display: flex; align-items: baseline; gap: 4px; margin: 8px 0 18px; } .lp-price-amt { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; } .lp-plan-features { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .lp-plan-features li { color: var(--text-sub-600); font-size: 14px; } @media (max-width: 900px) { .lp-pricing { grid-template-columns: 1fr; max-width: 420px; } }