/* ========================================================================== Serious numbers, light heart -- the apps' layer (docs/design-philosophy.md) ========================================================================== Loaded last by every signed-in page and the sign-in pages: staff, client portal, partner and professional panels, Super Admin. A CA spends the day in figures and spreadsheets, so the app should be a small relief from them without ever looking like a toy. 1. Numbers stay serious. A figure, a date, a table never bounces, counts up or wears a colour for fun. Red still means late, green still means done. 2. Colour says where you are. Each module has its own (--area), on the rail and the panel only. Buttons and links stay the one calm blue. 3. Fun is earned. Finishing something gets a small burst (lively.js), an empty list gets a kind line. Nothing celebrates merely being opened. 4. Motion is quick and quiet: under 300ms, no overshoot, nothing loops, and prefers-reduced-motion turns it all off (main.css). 5. Grown-up, always: no cartoons, no mascots, no bouncing. Everything here is tokens and component polish. Layout belongs to main.css and ca.css. Tokens below replace main.css's warm paper with a cool, cleaner ground; dark mode keeps its own set. */ :root { --bg: #f4f6fa; --surface: #ffffff; --fill: #eef1f6; --fill-strong: #e2e6ee; --border: #d8dde8; --border-soft: #e7eaf1; --text-strong: #131928; --text: #262d3e; --text-muted: #4f586c; --text-faint: #5b6478; --bg-rgb: 244 246 250; --muted-rgb: 79 88 108; --shadow-rgb: 23 33 58; --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / .05); --shadow-md: 0 1px 2px rgb(var(--shadow-rgb) / .04), 0 10px 24px -12px rgb(var(--shadow-rgb) / .16); --shadow-lg: 0 2px 6px rgb(var(--shadow-rgb) / .05), 0 22px 48px -18px rgb(var(--shadow-rgb) / .3); --ease: cubic-bezier(.16, 1, .3, 1); --dur: .2s; --radius-lg: 1.05rem; --radius-xl: 1.4rem; --area: 43 98 171; --rail-w: 68px; --panel-w: 238px; } @media (prefers-color-scheme: dark) { :root { --bg: #10131a; --surface: #191d26; --fill: #232833; --fill-strong: #2e3441; --border: #363c4a; --border-soft: #272c37; --text-strong: #f3f5f9; --text: #e2e5ec; --text-muted: #b6bcc9; --text-faint: #9da4b3; --bg-rgb: 16 19 26; --surface-rgb: 25 29 38; --muted-rgb: 182 188 201; --shadow-rgb: 0 0 0; --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow-md: 0 8px 22px -12px rgb(0 0 0 / .7); --shadow-lg: 0 24px 48px -16px rgb(0 0 0 / .75); } } /* A colour for each module. Light enough to rest on, dark enough for white. */ [data-area="practice"] { --area: 43 98 171; } [data-area="sales"] { --area: 190 80 44; } [data-area="billing"] { --area: 15 122 95; } [data-area="team"] { --area: 107 79 176; } @media (prefers-color-scheme: dark) { [data-area="practice"] { --area: 108 155 218; } [data-area="sales"] { --area: 232 134 100; } [data-area="billing"] { --area: 72 190 157; } [data-area="team"] { --area: 165 141 226; } } /* ---------- Rail + panel: staff with more than one module ---------- */ .rail { display: none; } .panel-head { display: none; } @media (min-width: 861px) { .has-rail { --sidebar-w: calc(var(--rail-w) + var(--panel-w) + 2rem); } .rail { position: fixed; z-index: 101; top: .6rem; bottom: .6rem; left: .6rem; width: var(--rail-w); display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .4rem; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); view-transition-name: rail; } .has-rail .sidebar { top: .6rem; bottom: .6rem; left: calc(var(--rail-w) + 1.05rem); width: var(--panel-w); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; box-shadow: var(--shadow-sm); background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 40%, rgb(var(--area) / .055) 100%); } .has-rail .topbar .module-tabs, .has-rail .module-tabs-drawer { display: none; } .has-rail .sidebar-brand { display: none; } .has-rail .panel-head { display: flex; } .has-rail .topbar { padding-left: .5rem; } /* Search leads the bar, once the module tabs have moved to the rail. */ .has-rail .topbar-search { order: -1; flex: 0 1 25rem; justify-content: flex-start; } .has-rail .topbar-search kbd { margin-left: auto; } } /* A small laptop keeps the rail and folds the panel behind the menu button, so the page beside it has the room a table needs. */ @media (min-width: 861px) and (max-width: 1100px) { .has-rail { --sidebar-w: calc(var(--rail-w) + 1.2rem); } .has-rail .sidebar { transform: translateX(calc(-100% - var(--rail-w) - 2rem)); box-shadow: var(--shadow-lg); background: var(--surface); } body.has-rail.sidebar-open .sidebar { transform: none; } body.has-rail.sidebar-open .sidebar-backdrop { display: block; } .has-rail .sidebar-toggle { display: flex; order: -2; } } .rail-brand { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .55rem; border-radius: .85rem; color: var(--on-accent); background: linear-gradient(145deg, var(--accent), #1c2a66); } .rail-brand svg { width: 1.35rem; height: 1.35rem; } .rail-link { display: grid; justify-items: center; gap: .12rem; width: 100%; padding: .5rem .1rem .42rem; border-radius: .95rem; color: var(--text-muted); text-decoration: none; font-size: .6875rem; font-weight: 580; letter-spacing: -.005em; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .rail-link svg { width: 1.3rem; height: 1.3rem; transition: transform .28s var(--ease); } .rail-link:hover { background: rgb(var(--area) / .1); color: rgb(var(--area)); } .rail-link:hover svg { transform: translateY(-1px) scale(1.06); } .rail-link:active { transform: scale(.96); } .rail-link.active { background: rgb(var(--area)); color: #fff; box-shadow: 0 8px 16px -8px rgb(var(--area) / .9); font-weight: 650; } @media (prefers-color-scheme: dark) { .rail-link.active { color: #10131a; } } .panel-head { align-items: center; gap: .65rem; padding: 1rem 1rem .7rem; } .panel-ic { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; flex: none; border-radius: .7rem; background: rgb(var(--area) / .12); color: rgb(var(--area)); } .panel-ic svg { width: 1.15rem; height: 1.15rem; } .panel-head strong { display: block; font-family: var(--font-display, inherit); font-size: 1.0625rem; font-weight: 720; letter-spacing: -.018em; color: var(--text-strong); line-height: 1.15; } .panel-head small { display: block; font-size: var(--fs-caption2); line-height: 1.25; color: var(--text-faint); margin-top: .1rem; } .desk .sidebar-nav { padding: .15rem .55rem 1rem; } .nav-link { border-radius: .7rem; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); font-size: var(--fs-footnote); font-weight: 500; } .nav-link .icon { transition: transform .28s var(--ease), color var(--dur) var(--ease); } .nav-link:hover .icon { transform: translateX(1px); color: rgb(var(--area)); } .nav-link:hover { background: rgb(var(--area) / .07); } .nav-link.active, .nav-link.active:hover { background: var(--surface); color: var(--text-strong); font-weight: 650; box-shadow: 0 0 0 1px var(--border-soft), 0 6px 14px -8px rgb(var(--shadow-rgb) / .25); } .nav-link.active .icon { color: rgb(var(--area)); } @media (prefers-color-scheme: dark) { .nav-link.active, .nav-link.active:hover { background: var(--fill); } } .nav-section-label { text-transform: none; letter-spacing: 0; font-size: var(--fs-caption2); font-weight: 650; padding: .95rem .65rem .25rem; } .sidebar-footer { border-top: 0; padding: .5rem 1.15rem .8rem; } /* ---------- Top bar ---------- */ .topbar { border-bottom: 0; } .topbar-search { border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .topbar-search:hover { border-color: var(--border); box-shadow: var(--shadow-md); } .topbar-icon { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .topbar-panel, .account-menu-list, .scope-switcher-menu { border-color: var(--border-soft); border-radius: 1rem; animation: pop-down .22s var(--ease) backwards; } @keyframes pop-down { from { opacity: 0; transform: translateY(-6px) scale(.985); } } .bell-count { animation: pop-down .3s var(--ease) backwards; } /* The rail and panel take a third of a small laptop, so the bar gives up its words before anything falls off the edge: names first, then the search's. */ @media (max-width: 1240px) { .account-name, .account-caret, .scope-switcher-label, .scope-switcher-caret { display: none; } .username-chip, .scope-switcher > summary { padding-left: .2rem; padding-right: .2rem; gap: 0; } } @media (max-width: 1040px) { .topbar-search { flex: 0 0 auto !important; width: 2.6rem; min-width: 0; padding: 0; justify-content: center !important; } .topbar-search span, .topbar-search kbd { display: none; } } /* The smallest phones (320px): the calendar goes first; Work has its own. */ @media (max-width: 360px) { .topbar-pop[data-cal] { display: none; } } /* ---------- Page entrance: the page settles in, then is left alone ---------- */ @keyframes desk-in { from { opacity: 0; transform: translateY(8px); } } .content > *, .portal-main > * { animation: desk-in .32s var(--ease) backwards; } .content > :nth-child(2), .portal-main > :nth-child(2) { animation-delay: 30ms; } .content > :nth-child(3), .portal-main > :nth-child(3) { animation-delay: 60ms; } .content > :nth-child(4), .portal-main > :nth-child(4) { animation-delay: 90ms; } .content > :nth-child(n+5), .portal-main > :nth-child(n+5) { animation-delay: 120ms; } /* ---------- Headings, cards ---------- */ .page-header { margin-bottom: 1.6rem; } .page-header h1, .console-head h1 { font-family: var(--font-display, inherit); font-size: clamp(1.6rem, 2.4vw, 2.05rem); font-weight: 740; letter-spacing: -.028em; } .card, .dash-col, .kpi, .stat-tile, .due-line, .table-wrap, .entity-card, .setup-step, .auth-card { border-color: var(--border-soft); } .card, .dash-col, .kpi, .stat-tile, .due-line, .table-wrap { box-shadow: var(--shadow-sm); } .desk .card { box-shadow: var(--shadow-sm); } .card, .dash-col, .kpi, .due-line { border-radius: var(--radius-lg); } a.card, a.kpi, a.stat-tile, .setup-step, .info-row { transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } a.card:hover, a.kpi:hover, a.stat-tile:hover, .setup-step:hover, .info-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .kpi-value, .stat-tile .stat-value, .widget-stat, .num { font-variant-numeric: lining-nums tabular-nums; } .kpi-label svg { color: var(--accent); } /* ---------- Buttons and fields ---------- */ .btn { border-radius: .72rem; font-weight: 600; transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease); } .btn:hover:not(:disabled) { transform: translateY(-1px); } .btn:active:not(:disabled) { transform: scale(.98); opacity: 1; } .btn-primary { box-shadow: 0 7px 14px -7px rgb(var(--accent-rgb) / .7); } .btn-primary:hover:not(:disabled) { box-shadow: 0 10px 18px -8px rgb(var(--accent-rgb) / .8); } .btn-secondary { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); } .btn-secondary:hover:not(:disabled) { background: var(--surface); border-color: var(--text-faint); } input:not([type]), input[type=text], input[type=password], input[type=date], input[type=number], input[type=month], input[type=time], input[type=tel], input[type=email], input[type=search], select, textarea { background-color: var(--surface); border-color: var(--border); } input:not([type]):hover, input[type=text]:hover, input[type=password]:hover, input[type=date]:hover, input[type=number]:hover, input[type=month]:hover, input[type=time]:hover, input[type=tel]:hover, input[type=email]:hover, input[type=search]:hover, select:hover, textarea:hover { background-color: var(--surface); border-color: var(--text-faint); } .view-switch { background: var(--surface); border-color: var(--border-soft); border-radius: .75rem; padding: .18rem; gap: .1rem; box-shadow: var(--shadow-sm); } .view-switch a { border-radius: .56rem; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .view-switch a:hover:not(.active) { background: var(--fill); color: var(--text-strong); } /* ---------- Tables: figures line up, rows answer the pointer ---------- */ .table-wrap { border-radius: var(--radius-lg); } thead th { font-weight: 620; } tbody tr:hover { background: rgb(var(--accent-rgb) / .045); } .badge { font-weight: 620; } /* A link in a table or a list is the row's name: strong ink, blue when pointed at. A link in running text keeps a thin underline so it can still be found. */ td a:not([class]), .widget-list a:not([class]), .muted-small a:not([class]) { color: var(--text-strong); font-weight: 590; text-decoration: none; transition: color var(--dur) var(--ease); } td a:not([class]):hover, .widget-list a:not([class]):hover, .muted-small a:not([class]):hover { color: var(--accent); } .content p a:not([class]), .card a:not([class]):not(td a) { text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgb(var(--accent-rgb) / .4); } /* ---------- Messages ---------- */ .alert { animation: slide-in .32s var(--ease) backwards; border-radius: .85rem; } @keyframes slide-in { from { opacity: 0; transform: translateY(-6px); } } .alert-success { display: flex; align-items: center; gap: .55rem; font-weight: 520; } .alert-success::before { content: ''; flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.3 8.4 2.5 2.5 4.9-5.4'/%3E%3C/svg%3E") center / .85rem no-repeat; animation: tick-in .42s var(--ease) .08s backwards; } @keyframes tick-in { from { transform: scale(.4); opacity: 0; } } @media (prefers-color-scheme: dark) { .alert-success::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2310131a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.3 8.4 2.5 2.5 4.9-5.4'/%3E%3C/svg%3E"); } } /* ---------- The sky: a greeting that takes the colour of the hour ---------- Dawn in the morning, a clear sky at noon, dusk in the evening, night after ten. The faint rules are a ledger page, the one thing staff look at all day. */ .sky { position: relative; overflow: hidden; isolation: isolate; display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.35rem; padding: clamp(1.15rem, 2.2vw, 1.75rem) clamp(1.15rem, 2.4vw, 2rem); border-radius: var(--radius-xl); border: 1px solid rgb(var(--shadow-rgb) / .06); box-shadow: var(--shadow-sm); } .sky::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .55; background-image: linear-gradient(rgb(var(--sky-line, 23 33 58) / .07) 1px, transparent 1px); background-size: 100% 1.9rem; -webkit-mask-image: linear-gradient(100deg, transparent 42%, #000 92%); mask-image: linear-gradient(100deg, transparent 42%, #000 92%); } .sky-sun { position: absolute; z-index: -1; right: clamp(0rem, 5vw, 4rem); top: 1.4rem; width: 11rem; height: 11rem; margin-top: -2.8rem; border-radius: 50%; animation: sun-up 1.1s var(--ease) backwards; } @keyframes sun-up { from { opacity: 0; transform: translateY(26px) scale(.92); } } .sky[data-sky="morning"] { background: linear-gradient(112deg, #fff8ec 0%, #ffedd8 44%, #e3effb 100%); } .sky[data-sky="morning"] .sky-sun { background: radial-gradient(circle, #ffcf72 0 31%, rgb(255 197 94 / .42) 39%, rgb(255 197 94 / 0) 70%); } .sky[data-sky="day"] { background: linear-gradient(112deg, #eff5ff 0%, #dfeafc 52%, #f3f7ff 100%); } .sky[data-sky="day"] .sky-sun { background: radial-gradient(circle, #ffe9a6 0 31%, rgb(255 236 170 / .55) 39%, rgb(255 240 190 / 0) 70%); } .sky[data-sky="evening"] { background: linear-gradient(112deg, #fff0e7 0%, #f3e6f6 50%, #dde2f7 100%); } .sky[data-sky="evening"] .sky-sun { background: radial-gradient(circle, #fbab84 0 31%, rgb(247 155 120 / .42) 39%, rgb(247 155 120 / 0) 70%); } .sky[data-sky="night"] { --sky-line: 255 255 255; background: radial-gradient(26rem 12rem at 88% 8%, rgb(106 126 214 / .34), transparent 70%), linear-gradient(112deg, #121a3a 0%, #1a2558 100%); } .sky[data-sky="night"] .sky-sun { background: radial-gradient(circle, #eef1fd 0 21%, rgb(190 203 255 / .26) 28%, rgb(190 203 255 / 0) 62%); } .sky[data-sky="night"], .sky[data-sky="night"] h1 { --text-strong: #fff; --text-muted: #c7cfe8; --text-faint: #aeb7d6; --text: #e6e9f6; } @media (prefers-color-scheme: dark) { .sky { --sky-line: 255 255 255; --text-strong: #fff; --text-muted: #c7cfe8; --text-faint: #aeb7d6; } .sky[data-sky="morning"] { background: linear-gradient(112deg, #2a2219 0%, #272126 48%, #1b2436 100%); } .sky[data-sky="day"] { background: linear-gradient(112deg, #17233b 0%, #1a2a49 50%, #18233a 100%); } .sky[data-sky="evening"] { background: linear-gradient(112deg, #2c1f1f 0%, #271f33 50%, #1a2038 100%); } .sky .sky-sun { opacity: .55; } } .sky-words { min-width: 0; max-width: 46rem; position: relative; } .sky h1 { font-family: var(--font-display, inherit); color: var(--text-strong); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.12; margin: .2rem 0 .55rem; } .sky-date { font-size: var(--fs-caption); font-weight: 650; letter-spacing: .02em; color: var(--text-faint); } .sky .subtitle { color: var(--text-muted); font-size: var(--fs-subhead); } .sky .btn-secondary { background: rgb(255 255 255 / .75); border-color: rgb(var(--shadow-rgb) / .09); } .sky .btn-secondary:hover:not(:disabled) { background: #fff; } .sky[data-sky="night"] .btn-secondary { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .2); color: #fff; } @media (prefers-color-scheme: dark) { .sky .btn-secondary { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .16); color: #fff; } } /* The note's figures, each a small white chip on the sky. */ .sky .today-note { color: var(--text-muted); font-size: 1.0625rem; } .sky .today-fig { background: rgb(255 255 255 / .75); box-shadow: 0 0 0 1px rgb(var(--shadow-rgb) / .06); } .sky .today-fig:hover { background: #fff; } .sky[data-sky="night"] .today-fig { background: rgb(255 255 255 / .14); box-shadow: none; color: #fff; } @media (prefers-color-scheme: dark) { .sky .today-fig { background: rgb(255 255 255 / .1); box-shadow: none; color: #fff; } .sky .today-fig:hover { background: rgb(255 255 255 / .18); } } .today-clear { display: inline-flex; align-items: center; gap: .3rem; color: var(--success-text); font-weight: 650; } .today-clear svg { width: 1.05em; height: 1.05em; } /* The hour's words on top; the day's line and the buttons along the foot. */ .sky-words { flex: 1 1 100%; } .sky-foot { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.25rem; position: relative; } .sky-foot .today-actions { padding: 0; margin-left: auto; } .desk-line { margin: 0; font-size: var(--fs-footnote); color: var(--text-faint); } .desk-line::before { content: ''; display: inline-block; width: 1.1rem; height: 2px; margin-right: .5rem; vertical-align: .22em; border-radius: 2px; background: rgb(var(--area) / .55); } @media (max-width: 640px) { .sky-sun { right: -3.5rem; top: .8rem; } .sky-foot .today-actions { margin-left: 0; } } /* ---------- Today's lists: a little colour on each heading ---------- */ .col-ic { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: .55rem; align-self: center; background: rgb(var(--tone) / .12); color: rgb(var(--tone)); } .col-ic svg, .desk .dash-col h2 .col-ic svg { display: block; width: .98rem; height: .98rem; color: inherit; } .tone-blue { --tone: 43 98 171; } .tone-amber { --tone: 161 98 7; } .tone-green { --tone: 15 122 95; } .tone-coral { --tone: 190 80 44; } .tone-violet { --tone: 107 79 176; } @media (prefers-color-scheme: dark) { .tone-blue { --tone: 108 155 218; } .tone-amber { --tone: 234 179 8; } .tone-green { --tone: 72 190 157; } .tone-coral { --tone: 232 134 100; } .tone-violet { --tone: 165 141 226; } } .desk .dash-col h2 { align-items: center; } .desk .dash-item { transition: padding-left var(--dur) var(--ease); } .desk .dash-item:hover { padding-left: .3rem; } .desk .dash-item:hover strong { text-decoration: none; color: var(--accent); } .dash-empty, .desk .dash-empty { display: flex; align-items: center; gap: .55rem; padding: .85rem 0; color: var(--text-muted); } .dash-empty::before { content: ''; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--success-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2318773f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.3 8.4 2.5 2.5 4.9-5.4'/%3E%3C/svg%3E") center / .9rem no-repeat; } .empty-state { color: var(--text-muted); } .empty-state .icon svg { color: rgb(var(--area)); } /* The due-date line: a small bar under each stop, filling on arrival. */ .due-bar { display: block; height: 4px; margin-top: .35rem; max-width: 6.5rem; border-radius: 4px; background: var(--fill-strong); overflow: hidden; } .due-bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--accent); transform-origin: 0 50%; animation: bar-grow .9s var(--ease) .2s backwards; } .due-stop.is-done .due-bar i { background: var(--success); } .due-stop.is-late .due-bar i { background: var(--error); } @keyframes bar-grow { from { transform: scaleX(0); } } a.due-stop { transition: transform .22s var(--ease); } a.due-stop:hover { transform: translateY(-2px); } /* ---------- Boards ---------- */ .kcol { background: rgb(var(--muted-rgb) / .065); border-radius: 1.05rem; } .kcol-head { text-transform: none; letter-spacing: -.005em; font-size: var(--fs-footnote); color: var(--text-strong); font-weight: 680; gap: .5rem; } .kcol-head::before { content: ''; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--kdot, var(--text-faint)); } .kcol-head .count { padding: 0 .45rem; min-width: 1.5rem; text-align: center; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); font-variant-numeric: tabular-nums; } .kcol[data-status="in_progress"], .kcol[data-status="contacted"], .kcol[data-status="verified"] { --kdot: #3b82d6; } .kcol[data-status="waiting_client"], .kcol[data-status="qualified"], .kcol[data-status="pending"] { --kdot: #d99a1c; } .kcol[data-status="review"], .kcol[data-status="proposal"] { --kdot: #8a63d2; } .kcol:not([data-status]) { --kdot: #d9673a; } .kcol[data-status="done"], .kcol[data-status="filed"], .kcol[data-status="won"], .kcol[data-status="completed"] { --kdot: #18a35c; } .kcol[data-status="lost"], .kcol[data-status="ignored"] { --kdot: #9aa1af; } .kcard { border-radius: .85rem; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); margin-bottom: .55rem; } .kcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .kcard.dragging { opacity: .9; transform: rotate(1.6deg) scale(1.02); box-shadow: var(--shadow-lg); } .kcol.drag-over { outline: 2px dashed rgb(var(--accent-rgb) / .55); background: rgb(var(--accent-rgb) / .06); } .kcard a.kcard-title { transition: color var(--dur) var(--ease); } .kcard a.kcard-title:hover { color: var(--accent); } .kcard .kcard-progress span { border-radius: 4px; } /* Late keeps its red edge: a date past due still has to be seen from across the board. */ .kcard.is-late, .kcard.is-soon { border-left-width: 3px; } /* Avatars take a soft colour from the name (lively.js), so a person is found by eye. */ .avatar[data-tone="0"], .who-dot[data-tone="0"] { background: #e1ebfb; color: #1f4f93; } .avatar[data-tone="1"], .who-dot[data-tone="1"] { background: #fdeadf; color: #9c421f; } .avatar[data-tone="2"], .who-dot[data-tone="2"] { background: #dcf3ec; color: #0c6a52; } .avatar[data-tone="3"], .who-dot[data-tone="3"] { background: #ece6fa; color: #5b3fa3; } .avatar[data-tone="4"], .who-dot[data-tone="4"] { background: #fbf0d3; color: #815a06; } .avatar[data-tone="5"], .who-dot[data-tone="5"] { background: #fbe4ee; color: #a12a5e; } .who-dot { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; margin: -.05rem .3rem -.05rem -.28rem; border-radius: 50%; font-size: .625rem; font-weight: 750; vertical-align: middle; } @media (prefers-color-scheme: dark) { .avatar[data-tone], .who-dot[data-tone] { filter: saturate(.9) brightness(.82); } } /* A client in the list: their initial in their own colour. */ .roster-row { display: flex; align-items: center; gap: .7rem; transition: background var(--dur) var(--ease); } .row-av { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; flex: none; border-radius: .7rem; font-size: var(--fs-footnote); font-weight: 720; background: var(--fill); color: var(--text-muted); } .roster-row .who { min-width: 0; } /* Overdue on a board card: the date itself, in red. */ .kcard .kcard-meta .k-late { color: var(--error-text); font-weight: 590; } /* The small burst when something gets finished (lively.js cheer()). A handful of dots and dashes, gone in under a second. */ .cheer { position: fixed; z-index: 400; width: 0; height: 0; pointer-events: none; } .cheer i { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--c); animation: cheer-out var(--t) cubic-bezier(.12, .7, .3, 1) forwards; } .cheer i.dash { width: 3px; height: 11px; border-radius: 2px; } @keyframes cheer-out { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(.6); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); } } /* ---------- Bugs this pass found ---------- */ /* A