/* ========================================================================================== CyberRunner · css/base.css — the EQUA CRM component layer (E:/localcrm/equa-crm-v2/src: styles.css, follow-me.css, assistant.css, flows/flow.css, links/links.css, tags/tags.css, account-logo.css), ported faithfully from understand/localcrm-components.css. Group headers name each React component and its source lines; rule text is verbatim except: · CRM-only groups dropped: [25e] contract consumption + contract table, [34] sign-in; CRM-only selectors pruned from shared/responsive rules (contracts, signatures, timesheets, planner, invoices, cash flow, auth, co-working cursor); · [31] the truncated @media(forced-colors:active) block restored (unclosed in the extract, it swallowed every later group); · every @media(prefers-color-scheme:dark) component rule also applies under :root[data-theme="dark"] and yields to :root[data-theme="light"] (the console's theme toggle). Generated by work/ui-foundation/tools/build_base.py. The security layer on top is css/app.css. ========================================================================================== */ /* ===== [01 BASE, BROWSER SURFACES, TYPOGRAPHY] ===== used by: global (main.tsx imports styles.css). body::before paints the green "desktop" tint that glass samples. source: styles.css:54-82 */ /* Base and browser surfaces */ *,*::before,*::after{box-sizing:border-box} html{scrollbar-color:rgb(120 120 128/.42) transparent;scrollbar-width:thin} body{margin:0;min-height:100vh} body::before{content:'';position:fixed;inset:0;z-index:-1;background:var(--desktop);pointer-events:none} *{scrollbar-width:thin;scrollbar-color:rgb(120 120 128/.42) transparent} button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit} button,a{-webkit-tap-highlight-color:transparent} button{cursor:pointer;border:0;background:none;padding:0} button:disabled{cursor:default;opacity:.5} .button.primary:disabled{opacity:1;background:var(--fill-2);color:var(--label-3);box-shadow:none} a{color:inherit;text-decoration:none} a,button,input,select,textarea,summary,[tabindex]{outline-offset:2px} :focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-sm)} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0} svg{flex-shrink:0} svg.lucide{stroke-width:1.75} h1,h2,h3,p{margin:0} h1{font-size:30px;line-height:1.12;letter-spacing:-.022em;font-weight:700;text-wrap:balance} h2{font-size:17px;line-height:1.3;letter-spacing:-.012em;font-weight:650;text-wrap:balance} h3{font-size:15px;line-height:1.35;letter-spacing:-.008em;font-weight:620} p{text-wrap:pretty} ::selection{background:var(--accent-tint-2);color:inherit} input,textarea{caret-color:var(--accent-text)} ::placeholder{color:var(--label-2);opacity:1} kbd{font-family:inherit} code{font-family:ui-monospace,'SF Mono','Cascadia Code',Menlo,Consolas,monospace;font-size:.92em} .numeric,td,.stat>strong{font-variant-numeric:tabular-nums} @supports(corner-shape:superellipse(1.4)){.panel,.modal,.sidebar,.notification-popover,.search-results,.project-card,.stat,.person-card,.opportunity-card{corner-shape:superellipse(1.4)}} /* ===== [02 MOTION VOCABULARY (keyframes materialize / settle / sheet-in / scrim-in / rise-in / toolbar-title / toolbar-edge / loading / sheet-up)] ===== used by: everything; settle runs on .page-content>* on every mount source: styles.css:84-92, styles.css:1495 note: Other keyframes live with their component: tabs-fade (group 08), assistant-thinking (26), ai-pulse (33), assistant-drawer-in / assistant-launcher-in / cowork-click / entra-waiting (27), flow-* (29), cx-* (30), tag-pop (31), cfp-pulse (33). */ /* Motion vocabulary */ @keyframes materialize{from{opacity:0;transform:scale(.97) translateY(-4px);filter:blur(6px)}} @keyframes settle{from{opacity:.35;transform:translateY(6px)}} @keyframes sheet-in{from{opacity:0;transform:translateY(10px) scale(.97)}} @keyframes scrim-in{from{opacity:0}} @keyframes rise-in{from{opacity:0;transform:translate(-50%,10px) scale(.97)}} @keyframes toolbar-title{from{opacity:0}} @keyframes toolbar-edge{to{box-shadow:0 var(--hairline-w) 0 var(--hairline),0 8px 24px rgb(0 0 0/.045)}} @keyframes loading{to{transform:translateX(220%)}} @keyframes sheet-up{from{transform:translateY(24px);opacity:.4}} /* ===== [03 APP SHELL — FLOATING GLASS SIDEBAR (brand, workspace switch, nav groups, nav links, nav counts, footer cards, status line)] ===== used by: App.tsx