/* Evacor design system v2.2.0 - tokens
Brand block: the shared Evacor mark (reference/assets/evacor-mark.svg, colour --logo) + the product wordmark. Nothing else changes per product.
Monochrome UI + 6 indicator colours. Never write a literal hex in product code.
Usage: | "dark" | "light" */
[data-theme='light'], :root {
color-scheme: light;
--page: #F7F8F7;
--surface: #FFFFFF;
--subtle: #FCFDFC;
--muted: #F5F6F5;
--fill1: #F1F2F1;
--fill2: #F1F4F2;
--fill3: #F3F5F4;
--selected: #FBFDFC;
--bd-panel: #ECEEED;
--bd-inner: #EFF1F0;
--bd-input: #EAECEB;
--bd-chip: #E7EAE9;
--bd-rule: #F0F2F1;
--bd-dash: #EDEFEE;
--bd-active: #D8DAD9;
--t1: #111111;
--t-hover: #000000;
--t-body: #3F4644;
--t-nav: #5F6764;
--t-muted: #6B7472;
--t-sub: #7C837F;
--t3: #8A918E;
--t-icon: #9BA29F;
--t-meta: #A0A6A3;
--t-faint: #A8AEAB;
--t-chev: #B8BEBB;
--avatar: #DDE3E0;
--avatar-fg: #5A625F;
--logo: #111111;
--auth-logo-fg: #F7F6F2; /* alias, kept for apps that still use it */
--btn-bg: #111111;
--btn-fg: #FFFFFF;
--btn-hover: #000000;
--kpi-inner: #FFFFFF;
--kpi-inner-bd: #EAECEB;
--accent: #7AE7CF;
--accent-text: #1C8A73; /* accent as text on light; kept for app compatibility */
--accent-a: #B4F2E4;
--accent-fg: #0B2E27;
--accent-hover: #5FD6BB;
--sel: #E4E6E5;
--scrim: rgba(0,0,0,.32);
--shadow: rgba(0,0,0,.14); /* alias, kept for apps that still use it; the system itself never draws a shadow */
--rim: linear-gradient(172deg,#FFFFFF 0%,#F5F6F6 2.5%,#EAECEB 26%,#E2E4E3 100%);
--rim-inner: linear-gradient(174deg,#FDFDFD 0%,#F3F4F4 4%,#EDEFEE 100%);
--rim-hi: rgba(255,255,255,.55);
--rim-lift: rgba(17,17,17,.035);
--auth-bg: radial-gradient(ellipse 110% 70% at 10% 0%,rgba(122,231,207,.45),transparent 60%),radial-gradient(ellipse 90% 60% at 100% 35%,rgba(140,205,237,.35),transparent 62%),linear-gradient(180deg,#F4FBF8,#EAF3F0);
--auth-fg: #0B2E27;
--auth-fg2: #3F5A54;
--auth-fg3: #5E7771;
--auth-bd: #DDEBE6;
--auth-card: linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6));
--auth-card-bd: rgba(11,46,39,.08);
--auth-av: #D6EFE7;
}
[data-theme='dark'] {
color-scheme: dark;
--page: #0A0A0A;
--surface: #141414;
--subtle: #181818;
--muted: #1E1E1E;
--fill1: #252525;
--fill2: #202020;
--fill3: #1C1C1C;
--selected: #1A1A1A;
--bd-panel: #222222;
--bd-inner: #202020;
--bd-input: #282828;
--bd-chip: #2B2B2B;
--bd-rule: #1E1E1E;
--bd-dash: #242424;
--bd-active: #383838;
--t1: #F4F4F4;
--t-hover: #FFFFFF;
--t-body: #C8C8C8;
--t-nav: #A8A8A8;
--t-muted: #919191;
--t-sub: #8C8C8C;
--t3: #7F7F7F;
--t-icon: #707070;
--t-meta: #7D7D7D;
--t-faint: #6C6C6C;
--t-chev: #5B5B5B;
--avatar: #2E2E2E;
--avatar-fg: #B8B8B8;
--logo: #F4F4F4;
--btn-bg: #F4F4F4;
--btn-fg: #111111;
--btn-hover: #FFFFFF;
--kpi-inner: #14141433;
--kpi-inner-bd: #20202066;
--accent: #7AE7CF;
--accent-text: #7AE7CF;
--accent-a: #B4F2E4;
--accent-fg: #0B2E27;
--accent-hover: #5FD6BB;
--sel: #2E2E2E;
--scrim: rgba(0,0,0,.32);
--shadow: rgba(0,0,0,.55); /* alias, kept for apps that still use it; the system itself never draws a shadow */
--rim: linear-gradient(172deg,#B4B4B4 0%,#5E5E5E 2.5%,#333333 10%,#282828 42%,#222222 100%);
--rim-inner: linear-gradient(174deg,#4E4E4E 0%,#333333 4%,#272727 34%,#222222 100%);
--rim-hi: rgba(255,255,255,.04);
--rim-lift: rgba(0,0,0,.4);
/* sign-in screen */
--auth-bg: radial-gradient(ellipse 120% 70% at 15% 0%,rgba(122,231,207,.28),transparent 60%),radial-gradient(ellipse 90% 60% at 100% 30%,rgba(74,176,227,.16),transparent 60%),linear-gradient(180deg,#0B1412,#050807);
--auth-fg: #F7F6F2;
--auth-fg2: rgba(247,246,242,.7);
--auth-fg3: rgba(247,246,242,.6);
--auth-bd: transparent;
--auth-card: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
--auth-card-bd: rgba(255,255,255,.12);
--auth-av: rgba(255,255,255,.14);
}
[data-theme='brand'] {
color-scheme: dark;
--page: #0A0C0B;
--surface: rgba(255,255,255,.025);
--subtle: rgba(255,255,255,.02);
--muted: rgba(255,255,255,.03);
--fill1: rgba(255,255,255,.05);
--fill2: rgba(255,255,255,.04);
--fill3: rgba(255,255,255,.035);
--selected: rgba(255,255,255,.06);
--bd-panel: rgba(255,255,255,.08);
--bd-inner: rgba(255,255,255,.07);
--bd-input: rgba(255,255,255,.1);
--bd-chip: rgba(255,255,255,.1);
--bd-rule: rgba(255,255,255,.07);
--bd-dash: rgba(255,255,255,.08);
--bd-active: rgba(255,255,255,.2);
--t1: #F4F4F4;
--t-hover: #FFFFFF;
--t-body: #C8C8C8;
--t-nav: #A8A8A8;
--t-muted: #919191;
--t-sub: #8C8C8C;
--t3: #7F7F7F;
--t-icon: #707070;
--t-meta: #7D7D7D;
--t-faint: #6C6C6C;
--t-chev: #5B5B5B;
--avatar: rgba(255,255,255,.07);
--avatar-fg: #B8B8B8;
--logo: #7AE7CF;
--btn-bg: #F4F4F4;
--btn-fg: #111111;
--btn-hover: #FFFFFF;
--kpi-inner: rgba(255,255,255,.03);
--kpi-inner-bd: rgba(255,255,255,.07);
--accent: #7AE7CF;
--accent-text: #7AE7CF;
--accent-a: #B4F2E4;
--accent-fg: #0B2E27;
--accent-hover: #5FD6BB;
--sel: rgba(255,255,255,.07);
--scrim: rgba(0,0,0,.32);
--shadow: rgba(0,0,0,.55); /* alias, kept for apps that still use it; the system itself never draws a shadow */
--rim: linear-gradient(172deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.05) 100%);
--rim-inner: linear-gradient(174deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.05) 100%);
--rim-hi: rgba(255,255,255,.04);
--rim-lift: rgba(0,0,0,0);
--page-pattern: radial-gradient(ellipse 900px 620px at 12% -8%,rgba(34,96,80,.38),transparent 70%),radial-gradient(ellipse 900px 620px at 88% -8%,rgba(34,96,80,.38),transparent 70%);
--glass: blur(14px);
/* sign-in screen */
--auth-bg: radial-gradient(ellipse 120% 70% at 15% 0%,rgba(122,231,207,.28),transparent 60%),radial-gradient(ellipse 90% 60% at 100% 30%,rgba(74,176,227,.16),transparent 60%),linear-gradient(180deg,#0B1412,#050807);
--auth-fg: #F7F6F2;
--auth-fg2: rgba(247,246,242,.7);
--auth-fg3: rgba(247,246,242,.6);
--auth-bd: transparent;
--auth-card: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
--auth-card-bd: rgba(255,255,255,.12);
--auth-av: rgba(255,255,255,.14);
}
/* Brand mode: transparent glass surfaces over the page glow */
[data-theme='brand'] body, [data-theme='brand'] .ev-page { background: var(--page); background-image: var(--page-pattern); background-attachment: fixed; }
[data-theme='brand'] .ev-panel, [data-theme='brand'] .ev-card { backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); background-image: none; background-color: var(--surface); border-color: var(--bd-panel); }
[data-theme='brand'] .ev-panel .ev-card { background-color: transparent; }
[data-theme='brand'] .ev-rail, [data-theme='brand'] .ev-topbar { background-image: none; background-color: var(--surface); border-color: var(--bd-panel); }
[data-theme='brand'] .ev-rail.ev-drawer { background-color: var(--page); } /* opaque over the page it covers */
[data-theme='brand'] .ev-menu, [data-theme='brand'] .ev-dialog, [data-theme='brand'] .ev-toast {
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), rgba(12,17,16,.9);
backdrop-filter: blur(40px) saturate(1.5); -webkit-backdrop-filter: blur(40px) saturate(1.5);
}
/* Scrollbars: 5px, thumb only */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb { background: var(--bd-active); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--t-icon); }
/* ---- motion (identical in both modes) --------------------------------- */
:root {
--ease: cubic-bezier(.22, 1, .36, 1); /* the system curve , decelerating, no overshoot */
--spring: cubic-bezier(.34, 1.3, .64, 1); /* things that travel: drawers, sliding indicators */
--ease-soft: cubic-bezier(.4, 0, .2, 1); /* colour and theme crossfades only */
--ease-in: cubic-bezier(.4, 0, 1, 1); /* exits only: menus, dialogs, scrims, toasts */
--stagger: 40ms; /* one delay step for lists, bars and reveals */
--dur-1: 160ms; /* press, hover on small controls */
--dur-2: 240ms; /* rows, chips, nav, toggles, card lift */
--dur-3: 380ms; /* panel entrance, theme change, chart growth */
}
@keyframes eva-rise { from { opacity: 0; transform: translateY(8px) scale(.985); filter: blur(4px); } }
@keyframes eva-pop { from { opacity: 0; transform: translateY(6px) scale(.96); filter: blur(6px); } }
@keyframes eva-menu { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
@keyframes eva-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes eva-toast { from { opacity: 0; transform: translate(-50%, 18px) scale(.96); } }
/* Exits. Everything that opens also closes: keep the element mounted for --dur-1/2 with data-closing, then remove it */
@keyframes eva-menu-out { to { opacity: 0; transform: translateY(-3px) scale(.98); } }
@keyframes eva-pop-out { to { opacity: 0; transform: translateY(4px) scale(.98); } }
@keyframes eva-fade-out { to { opacity: 0; } }
.ev-menu[data-closing] { animation: eva-menu-out var(--dur-1) var(--ease-in) forwards; pointer-events: none; }
.ev-dialog[data-closing] { animation: eva-pop-out var(--dur-2) var(--ease-in) forwards; pointer-events: none; }
.ev-scrim[data-closing] { animation: eva-fade-out var(--dur-2) var(--ease-soft) forwards; pointer-events: none; }
/* Theme change: one full-page crossfade. Wrap the data-theme switch in document.startViewTransition() */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-soft); mix-blend-mode: normal; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; }
/* Off-canvas drawer for phone and tablet */
.ev-drawer { /* bleeds 24px past the left edge so the spring's overshoot never shows the page */
position: fixed; inset: 0 auto 0 -24px; z-index: 45;
width: calc(min(320px, 86vw) + 24px); overflow-y: auto; overscroll-behavior: contain;
padding: calc(18px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom)) calc(42px + env(safe-area-inset-left));
transform: translate3d(-102%, 0, 0);
transition: transform var(--dur-2) var(--ease-in); /* closes fast */
}
.ev-drawer { border-right: 1px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--rim); background-origin: border-box; background-clip: padding-box, border-box; }
.ev-drawer[data-open='true'] { transform: translate3d(0, 0, 0); transition: transform var(--dur-3) var(--spring); } /* opens on the spring */
/* Sliding tab indicator , position from the active tab's offsetLeft/offsetWidth */
.ev-indicator { /* width is fixed at 100px; set transform: translate3d(x,y,0) scaleX(w/100) — never animate width */
position: absolute; left: 0; top: 0; width: 100px; transform-origin: 0 0; border-radius: var(--r); background: var(--fill1); pointer-events: none;
transition: transform var(--dur-3) var(--spring);
}
@media (max-width: 719px) { .ev-touch { min-width: 44px; min-height: 44px; } }
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: none), (pointer: coarse) {
.ev-kbd, [data-kbd] { display: none !important; } /* no "Ctrl K" chip on touch */
input, textarea, select { font-size: 16px; } /* stops the iOS zoom on focus */
.ev-icon-btn { position: relative; }
.ev-icon-btn::before { content: ''; position: absolute; inset: -6px; } /* 44px hit area around a 32px button */
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
html { scroll-behavior: auto; }
}
/* ---- the two composite recipes ---------------------------------------- */
/* Outer panel: silver rim border + hairline inset highlight */
.ev-panel {
border: 1px solid transparent;
border-radius: var(--r-panel);
background-image: linear-gradient(var(--surface), var(--surface)), var(--rim);
background-origin: border-box;
background-clip: padding-box, border-box;
box-shadow: inset 0 1px 0 var(--rim-hi);
padding: 26px 28px 28px;
transition: box-shadow var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease),
background-color var(--dur-3) var(--ease-soft);
}
/* Inner card: same treatment, weaker, so nesting still reads */
.ev-card {
border: 1px solid transparent;
border-radius: var(--r-panel);
background-image: linear-gradient(var(--surface), var(--surface)), var(--rim-inner);
background-origin: border-box;
background-clip: padding-box, border-box;
box-shadow: inset 0 1px 0 var(--rim-hi);
padding: 20px 22px 22px;
transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
/* Cards that are clickable lift on hover; nothing else moves on hover */
@media (hover: hover) { .ev-card--interactive:hover { transform: translateY(-2px); } }
/* Every button presses in. This is the single most important motion in the system */
.ev-press { transition: transform var(--dur-1) var(--ease); }
.ev-press:active { transform: scale(.97); }
/* Panels animate in when their content switches */
.ev-enter { animation: eva-rise var(--dur-3) var(--ease) both; }
html, body { margin: 0; background: var(--page); color: var(--t1);
font-family: 'Inter Display', 'Inter', sans-serif;
-webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: var(--t1); text-decoration: none; }
a:hover { color: var(--t-hover); }
::selection { background: var(--sel); }
input::placeholder { color: var(--t-faint); }
/* ---- radius scale (near square) --------------------------------------- */
/* 3px every square shape: panels, cards, buttons, inputs, chips, tiles, toggles
999px avatars, status dots, pills, the active nav bar, radio only */
:root { --r-panel: 3px; --r: 3px; --r-round: 999px; }
/* ---- indicator colours (status + category only, never surfaces) -------- */
/* Each has a light stop (-a) and a base (-b). Pills: text -b, bg gradient -a@10% to -b@6%, border -b@12% */
:root {
--ind-mint-a: #9AE0BD; --ind-mint-b: #60CD96; /* Approved */
--ind-sky-a: #8CCDED; --ind-sky-b: #4AB0E3; /* Open, Live */
--ind-periwinkle-a: #9696E3; --ind-periwinkle-b: #5A5AD3; /* Paid */
--ind-crimson-a: #D94A4F; --ind-crimson-b: #B9272C; /* Overdue, destructive */
--ind-coral-a: #F4B985; --ind-coral-b: #EE913F; /* Review */
--ind-slate-a: #B7BCC2; --ind-slate-b: #8A9099; /* Pending, Draft, neutral */
}
/* ---- components ------------------------------------------------------- */
.ev-btn { /* solid, monochrome */
background: var(--btn-bg); color: var(--btn-fg); border: none;
border-radius: var(--r-panel); padding: 12px 20px; font: inherit; font-size: 15px; font-weight: 500;
cursor: pointer; box-shadow: none;
transition: transform var(--dur-1) var(--ease);
}
.ev-btn:active { transform: scale(.97); }
/* The accent button. At most one per screen, and only on the main commit action.
Never on links, focus rings, status, charts, surfaces or the logo. */
.ev-btn--accent {
padding: 11px 19px; /* 1px border keeps the height of .ev-btn */
border: 1px solid var(--accent-hover);
background: linear-gradient(180deg, var(--accent-a), var(--accent)); color: var(--accent-fg);
transition: filter var(--dur-2) var(--ease), transform var(--dur-2) var(--spring);
}
@media (hover: hover) { .ev-btn--accent:hover { filter: brightness(.95); } } /* gradients cannot animate; filter can */
.ev-btn--accent:disabled, .ev-btn--accent[aria-disabled='true'] {
border-color: transparent; background: var(--muted); color: var(--t-faint); filter: none; cursor: default;
}
/* Brand block: the shared Evacor mark + the product wordmark. Only the wordmark text changes per product.
Mark: reference/assets/evacor-mark.svg (fill: currentColor), or . */
.ev-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ev-mark { width: 11.42px; height: 24px; color: var(--logo); flex-shrink: 0; display: block; }
.ev-wordmark {
font-size: 15px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-btn--secondary { /* 1px border, so 1px less padding keeps the height of .ev-btn */
padding: 11px 19px; background: var(--subtle); color: var(--t1);
border: 1px solid var(--bd-chip); border-radius: var(--r); box-shadow: none;
transition: border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
@media (hover: hover) { .ev-btn--secondary:hover { border-color: var(--t1); } }
.ev-btn--ghost {
background: transparent; color: var(--t3); border: none; border-radius: var(--r); box-shadow: none;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
@media (hover: hover) { .ev-btn--ghost:hover { background: var(--fill3); color: var(--t1); } }
.ev-icon-btn { /* 40px; .ev-icon-btn--sm is 36px (workspace card) */
width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
border: 1px solid var(--bd-input); border-radius: var(--r); background: var(--surface);
color: var(--t-nav); cursor: pointer;
transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--spring);
}
.ev-icon-btn--sm { width: 36px; height: 36px; }
@media (hover: hover) { .ev-icon-btn:hover { background: var(--fill1); color: var(--t1); border-color: var(--bd-active); } }
.ev-icon-btn:active { transform: scale(.94); transition-duration: var(--dur-1); transition-timing-function: var(--ease); }
.ev-input {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--bd-input); border-radius: var(--r); padding: 12px 14px;
background: var(--subtle); font-size: 15px; font-weight: 400; color: var(--t1);
transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.ev-input:focus-within { border-color: var(--t1); background: var(--surface); }
.ev-input > input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: inherit; }
.ev-input > svg { color: var(--t-icon); flex-shrink: 0; }
/* Select trigger: an input that opens an .ev-menu. The caret turns while it is open */
.ev-select { width: 100%; cursor: pointer; text-align: left; font-family: inherit; }
.ev-select[aria-expanded='true'] { border-color: var(--t1); background: var(--surface); }
.ev-select-caret { margin-left: auto; color: var(--t-icon); flex-shrink: 0; transition: transform var(--dur-2) var(--ease); }
.ev-select[aria-expanded='true'] .ev-select-caret { transform: rotate(180deg); }
.ev-input[disabled], .ev-input--disabled { background: var(--muted); color: var(--t-faint); }
.ev-pill { /* neutral status */
display: inline-block; font-size: 13px; font-weight: 500; letter-spacing: -.01em;
padding: 5px 10px; border-radius: var(--r); background: var(--fill2); color: var(--t-muted);
}
.ev-pill--emphasis { background: var(--fill1); color: var(--t1); }
.ev-badge { /* count badge */
display: inline-flex; align-items: center; gap: 8px;
background: var(--muted); border-radius: var(--r); padding: 7px 14px;
font-size: 14px; font-weight: 500; color: var(--t-nav);
}
.ev-badge::before { content: ''; width: 7px; height: 7px; border-radius: var(--r-round); background: var(--t1); }
.ev-row { /* list row: constant 10px inset, so only the background ever animates */
display: flex; align-items: center; gap: 12px; padding: 12px 10px; margin: 0 -10px; border-radius: var(--r);
border-bottom: 1px solid var(--fill3); cursor: pointer;
transition: background var(--dur-2) var(--ease);
}
.ev-row:last-child { border-bottom: none; }
@media (hover: hover) { .ev-row:hover { background: var(--fill1); } }
.ev-row[aria-selected='true'] { background: var(--fill1); border-bottom-color: transparent; }
.ev-nav-item {
position: relative; display: flex; align-items: center; gap: 12px;
z-index: 1; width: 100%; border: 0; background: transparent; text-decoration: none;
padding: 11px 12px 11px 14px; border-radius: var(--r); cursor: pointer;
color: var(--t-nav); font-size: 15px; font-weight: 400; letter-spacing: -.01em;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.ev-nav-item::before {
content: ''; position: absolute; left: 4px; top: 11px; bottom: 11px; width: 3px;
border-radius: var(--r-round); background: var(--t1); opacity: 0; transform: scaleY(.3);
transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.ev-nav-item[aria-current='page'] { background: var(--fill1); color: var(--t1); font-weight: 500; }
.ev-nav-item[aria-current='page']::before { opacity: 1; transform: scaleY(1); }
.ev-switch { /* toggle: 42x24 track, square knob. Use