/* ═══════════════════════════════════════════════════════════════════════ RxCloud CyberLab — Design System (rxcloud-ds.css) ─────────────────────────────────────────────────────────────────────── Canonical token + component layer for the "Security OS" redesign. SAFETY CONTRACT • Additive only. Defines `--rx-*` tokens (same values as rxcloud-vnext.css, so cascade order never changes the existing render) plus NEW scales. • Every component class is namespaced `.rxds-*` — these classes appear in NO existing markup, so loading this file cannot alter any current page. • No business logic, no IDs, no JS hooks. Pure presentation, opt-in. PERFORMANCE • Glass blur degrades automatically under `` (the tier flag set by rxcloud-bg.js on weak GPUs). • All motion is disabled under `prefers-reduced-motion: reduce`. Load order (from Phase 2 onward): rxcloud.css → rxcloud-premium.css → rxcloud-vnext.css → rxcloud-ds.css ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── 1. TOKENS — shared values mirror rxcloud-vnext.css 1:1 (no regression) ─────────────────────────────────────────────────────────────────────── */ :root{ /* Surfaces ------------------------------------------------------------ */ --rx-bg-0:#05090f; /* deepest void */ --rx-bg-1:#0a1422; /* navy base */ --rx-bg-2:#0d1a2e; /* solid card navy (cockpit) */ --rx-panel:rgba(16,24,36,.52); /* glass surface */ --rx-panel-strong:rgba(12,19,30,.80); /* Cyan identity ------------------------------------------------------- */ --rx-cyan:#1bd4f5; --rx-cyan-bright:#6cf0ff; --rx-cyan-soft:rgba(20,210,250,.12); --rx-cyan-deep:#0a8fb5; --rx-glow:rgba(20,210,250,.18); --rx-glow-strong:rgba(20,210,250,.30); /* Lines & text -------------------------------------------------------- */ --rx-border:rgba(255,255,255,.10); --rx-border-cyan:rgba(27,212,245,.24); --rx-text:#e8f6ff; /* primary */ --rx-muted:#8ba6bd; /* secondary */ --rx-text-2:#8ba6bd; /* alias of --rx-muted */ --rx-text-3:#5f7790; /* hints / timestamps / mono labels */ /* Semantic state (parcimonious — never decorative) -------------------- */ --rx-danger:#ff5d6c; --rx-success:#2ee6a6; --rx-warning:#ffb443; --rx-info:#3fb6ff; /* informational, distinct from accent */ /* Gradients ----------------------------------------------------------- */ --rx-grad-cyan:linear-gradient(135deg, var(--rx-cyan-bright), var(--rx-cyan) 45%, var(--rx-cyan-deep)); --rx-grad-accent:linear-gradient(180deg, var(--rx-cyan-bright), var(--rx-cyan-deep)); /* Elevation ----------------------------------------------------------- */ --rx-shadow-1:0 6px 18px rgba(0,0,0,.35); --rx-shadow-2:0 18px 48px rgba(0,0,0,.50); --rx-shadow-3:0 30px 80px rgba(0,0,0,.58); /* Radii --------------------------------------------------------------- */ --rx-r-xs:8px; --rx-r-sm:12px; --rx-r-md:16px; --rx-r-lg:22px; --rx-r-xl:26px; --rx-r-pill:999px; /* NEW — spacing scale (4px base) -------------------------------------- */ --rx-space-1:4px; --rx-space-2:8px; --rx-space-3:12px; --rx-space-4:16px; --rx-space-5:20px; --rx-space-6:24px; --rx-space-7:32px; --rx-space-8:48px; /* NEW — glass blur (degrades under .rx-perf-lite) --------------------- */ --rx-blur:blur(20px) saturate(125%); /* NEW — motion -------------------------------------------------------- */ --rx-ease:cubic-bezier(.2,.8,.2,1); --rx-ease-out:cubic-bezier(.16,1,.3,1); --rx-dur-1:120ms; --rx-dur-2:180ms; --rx-dur-3:240ms; /* NEW — z-index scale ------------------------------------------------- */ --rx-z-bg:0; --rx-z-base:1; --rx-z-sticky:50; --rx-z-rail:100; --rx-z-overlay:800; --rx-z-modal:900; --rx-z-toast:1000; /* NEW — typography ---------------------------------------------------- */ --rx-font-sans:Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif; --rx-font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Cascadia Mono", monospace; --rx-fs-display:clamp(28px, 4vw, 40px); --rx-fs-h1:24px; --rx-fs-h2:18px; --rx-fs-h3:16px; --rx-fs-body:14px; --rx-fs-cap:12px; --rx-fs-micro:11px; --rx-fw-regular:400; --rx-fw-medium:500; } /* Perf tier: lighter blur on weak GPUs (flag set by rxcloud-bg.js) */ .rx-perf-lite{ --rx-blur:blur(9px) saturate(115%); --rx-shadow-3:0 18px 48px rgba(0,0,0,.50); } /* ─────────────────────────────────────────────────────────────────────── 2. SURFACES — verre fumé ─────────────────────────────────────────────────────────────────────── */ .rxds-glass{ background:linear-gradient(180deg, var(--rx-panel), rgba(10,16,26,.42)); border:1px solid var(--rx-border); -webkit-backdrop-filter:var(--rx-blur); backdrop-filter:var(--rx-blur); box-shadow:var(--rx-shadow-2); } .rxds-card{ position:relative; border-radius:var(--rx-r-lg); background:linear-gradient(180deg, var(--rx-panel), rgba(10,16,26,.42)); border:1px solid var(--rx-border); -webkit-backdrop-filter:var(--rx-blur); backdrop-filter:var(--rx-blur); box-shadow:var(--rx-shadow-2); padding:var(--rx-space-5) var(--rx-space-6); color:var(--rx-text); transition:border-color var(--rx-dur-2) var(--rx-ease), transform var(--rx-dur-2) var(--rx-ease), box-shadow var(--rx-dur-2) var(--rx-ease); } .rxds-card:hover{ border-color:var(--rx-border-cyan); transform:translateY(-1px); } /* subtle top highlight — the single inset that sells the glass */ .rxds-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); pointer-events:none; } .rxds-card--strong{ background:linear-gradient(180deg, var(--rx-panel-strong), rgba(9,14,22,.74)); box-shadow:var(--rx-shadow-3); } /* "Live" surface — only what is alive glows */ .rxds-card--live{ border-color:var(--rx-border-cyan); box-shadow:var(--rx-shadow-2), 0 0 28px var(--rx-glow); animation:rxds-breathe 3.6s var(--rx-ease) infinite; } @keyframes rxds-breathe{ 0%,100%{ box-shadow:var(--rx-shadow-2), 0 0 24px var(--rx-glow); } 50% { box-shadow:var(--rx-shadow-2), 0 0 38px var(--rx-glow-strong); } } /* ─────────────────────────────────────────────────────────────────────── 3. BUTTONS ─────────────────────────────────────────────────────────────────────── */ .rxds-btn{ --_h:38px; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--_h); padding:0 16px; font-family:var(--rx-font-sans); font-size:var(--rx-fs-body); font-weight:var(--rx-fw-medium); line-height:1; white-space:nowrap; color:var(--rx-text); background:rgba(255,255,255,.04); border:1px solid var(--rx-border); border-radius:var(--rx-r-sm); cursor:pointer; user-select:none; transition:border-color var(--rx-dur-1) var(--rx-ease), background var(--rx-dur-1) var(--rx-ease), box-shadow var(--rx-dur-1) var(--rx-ease), transform var(--rx-dur-1) var(--rx-ease); } .rxds-btn:hover{ border-color:var(--rx-border-cyan); background:rgba(255,255,255,.07); } .rxds-btn:active{ transform:scale(.98); } .rxds-btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--rx-cyan-soft), 0 0 0 1px var(--rx-cyan); } .rxds-btn--primary{ color:#04222b; background:var(--rx-grad-accent); border-color:transparent; box-shadow:0 0 14px var(--rx-glow); } .rxds-btn--primary:hover{ box-shadow:0 0 22px var(--rx-glow-strong); border-color:transparent; } .rxds-btn--ghost{ background:transparent; border-color:transparent; } .rxds-btn--ghost:hover{ background:rgba(255,255,255,.05); border-color:transparent; } .rxds-btn--danger{ color:#fff; background:rgba(255,93,108,.14); border-color:rgba(255,93,108,.4); } .rxds-btn--danger:hover{ background:rgba(255,93,108,.22); border-color:var(--rx-danger); } .rxds-btn--sm{ --_h:30px; padding:0 12px; font-size:var(--rx-fs-cap); } .rxds-btn--lg{ --_h:46px; padding:0 22px; font-size:var(--rx-fs-h3); } .rxds-btn--icon{ width:var(--_h); padding:0; } .rxds-btn[disabled], .rxds-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; transform:none; } .rxds-btn.is-loading{ position:relative; color:transparent !important; pointer-events:none; } .rxds-btn.is-loading::after{ content:""; position:absolute; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.25); border-top-color:var(--rx-cyan-bright); animation:rxds-spin .7s linear infinite; } @keyframes rxds-spin{ to{ transform:rotate(360deg); } } /* ─────────────────────────────────────────────────────────────────────── 4. BADGES — dot + label, never colour alone (a11y) ─────────────────────────────────────────────────────────────────────── */ .rxds-badge{ display:inline-flex; align-items:center; gap:7px; height:22px; padding:0 10px; font-family:var(--rx-font-sans); font-size:var(--rx-fs-micro); font-weight:var(--rx-fw-medium); border-radius:var(--rx-r-pill); color:var(--rx-muted); background:rgba(255,255,255,.05); border:1px solid var(--rx-border); } .rxds-badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; } .rxds-badge--running { color:var(--rx-cyan-bright); background:var(--rx-cyan-soft); border-color:var(--rx-border-cyan); } .rxds-badge--available{ color:var(--rx-success); background:rgba(46,230,166,.12); border-color:rgba(46,230,166,.32); } .rxds-badge--queued { color:var(--rx-warning); background:rgba(255,180,67,.12); border-color:rgba(255,180,67,.32); } .rxds-badge--offline { color:var(--rx-text-3); background:rgba(255,255,255,.04); border-color:var(--rx-border); } .rxds-badge--malicious{ color:var(--rx-danger); background:rgba(255,93,108,.12); border-color:rgba(255,93,108,.34); } .rxds-badge--info { color:var(--rx-info); background:rgba(63,182,255,.12); border-color:rgba(63,182,255,.32); } /* ─────────────────────────────────────────────────────────────────────── 5. FORMS ─────────────────────────────────────────────────────────────────────── */ .rxds-field{ display:flex; flex-direction:column; gap:var(--rx-space-2); } .rxds-label{ font-size:var(--rx-fs-cap); color:var(--rx-muted); font-weight:var(--rx-fw-medium); } .rxds-input, .rxds-select, .rxds-textarea{ width:100%; height:38px; padding:0 12px; font-family:var(--rx-font-sans); font-size:var(--rx-fs-body); color:var(--rx-text); background:var(--rx-bg-0); border:1px solid var(--rx-border); border-radius:var(--rx-r-sm); transition:border-color var(--rx-dur-1) var(--rx-ease), box-shadow var(--rx-dur-1) var(--rx-ease); } .rxds-textarea{ height:auto; min-height:96px; padding:10px 12px; resize:vertical; } .rxds-input--mono{ font-family:var(--rx-font-mono); letter-spacing:.2px; } .rxds-input::placeholder, .rxds-textarea::placeholder{ color:var(--rx-text-3); } .rxds-input:focus, .rxds-select:focus, .rxds-textarea:focus{ outline:none; border-color:var(--rx-cyan); box-shadow:0 0 0 3px var(--rx-cyan-soft); } /* ─────────────────────────────────────────────────────────────────────── 6. SESSION RING — conic gauge (CSS only, no SVG needed) ─────────────────────────────────────────────────────────────────────── */ .rxds-ring{ --_val:65; /* 0..100 */ --_size:76px; --_color:var(--rx-cyan); width:var(--_size); height:var(--_size); border-radius:50%; display:grid; place-items:center; position:relative; background: radial-gradient(closest-side, var(--rx-bg-2) 76%, transparent 77% 100%), conic-gradient(var(--_color) calc(var(--_val) * 1%), rgba(255,255,255,.08) 0); } .rxds-ring--warn{ --_color:var(--rx-warning); } .rxds-ring__value{ font-size:var(--rx-fs-body); font-weight:var(--rx-fw-medium); color:var(--rx-text); } .rxds-ring__label{ font-size:9px; color:var(--rx-text-3); margin-top:1px; } /* ─────────────────────────────────────────────────────────────────────── 7. STATS & THREAT SCORE ─────────────────────────────────────────────────────────────────────── */ .rxds-stat{ display:flex; flex-direction:column; gap:2px; } .rxds-stat__label{ font-size:var(--rx-fs-micro); color:var(--rx-text-3); } .rxds-stat__value{ font-size:var(--rx-fs-body); font-weight:var(--rx-fw-medium); color:var(--rx-text); } .rxds-stat__value--mono{ font-family:var(--rx-font-mono); } .rxds-score__num{ font-size:34px; font-weight:var(--rx-fw-medium); color:var(--rx-text); line-height:1; } .rxds-score__den{ font-size:14px; color:var(--rx-text-3); } .rxds-meter{ height:6px; border-radius:var(--rx-r-pill); background:rgba(255,255,255,.08); overflow:hidden; } .rxds-meter__fill{ height:100%; border-radius:inherit; background:var(--rx-grad-cyan); transition:width var(--rx-dur-3) var(--rx-ease); } .rxds-meter__fill--warn{ background:linear-gradient(90deg, var(--rx-cyan), var(--rx-warning)); } .rxds-meter__fill--danger{ background:linear-gradient(90deg, var(--rx-warning), var(--rx-danger)); } /* ─────────────────────────────────────────────────────────────────────── 8. ACTIVITY FEED — observed behaviours ─────────────────────────────────────────────────────────────────────── */ .rxds-activity{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:var(--rx-fs-body); } .rxds-activity__dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--rx-cyan); } .rxds-activity__dot--ok{ background:var(--rx-success); } .rxds-activity__dot--warn{ background:var(--rx-warning); } .rxds-activity__dot--danger{ background:var(--rx-danger); } .rxds-activity__text{ color:var(--rx-text); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rxds-activity__time{ font-family:var(--rx-font-mono); font-size:var(--rx-fs-micro); color:var(--rx-text-3); flex:0 0 auto; } /* ─────────────────────────────────────────────────────────────────────── 9. VM CARD — premium fleet element ─────────────────────────────────────────────────────────────────────── */ .rxds-vm{ display:flex; flex-direction:column; gap:var(--rx-space-3); } .rxds-vm__head{ display:flex; align-items:center; gap:10px; } .rxds-vm__os{ width:34px; height:34px; border-radius:var(--rx-r-sm); display:grid; place-items:center; flex:0 0 auto; background:var(--rx-cyan-soft); border:1px solid var(--rx-border-cyan); color:var(--rx-cyan-bright); font-size:16px; } .rxds-vm__name{ font-size:var(--rx-fs-h3); font-weight:var(--rx-fw-medium); color:var(--rx-text); } .rxds-vm__node{ font-size:var(--rx-fs-cap); color:var(--rx-muted); } .rxds-vm__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; } /* ─────────────────────────────────────────────────────────────────────── 10. NOTIFICATIONS / TOASTS ─────────────────────────────────────────────────────────────────────── */ .rxds-toast{ position:relative; display:flex; align-items:flex-start; gap:12px; padding:14px 16px 14px 18px; border-radius:var(--rx-r-md); background:linear-gradient(180deg, var(--rx-panel-strong), rgba(9,14,22,.74)); border:1px solid var(--rx-border); -webkit-backdrop-filter:var(--rx-blur); backdrop-filter:var(--rx-blur); box-shadow:var(--rx-shadow-2); color:var(--rx-text); max-width:380px; } .rxds-toast::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:var(--rx-r-pill); background:var(--rx-cyan); } .rxds-toast--success::before{ background:var(--rx-success); } .rxds-toast--warning::before{ background:var(--rx-warning); } .rxds-toast--danger::before{ background:var(--rx-danger); } .rxds-toast__title{ font-size:var(--rx-fs-body); font-weight:var(--rx-fw-medium); } .rxds-toast__body{ font-size:var(--rx-fs-cap); color:var(--rx-muted); margin-top:2px; } /* ─────────────────────────────────────────────────────────────────────── 11. MODAL ─────────────────────────────────────────────────────────────────────── */ .rxds-modal-overlay{ position:fixed; inset:0; z-index:var(--rx-z-modal); display:grid; place-items:center; padding:24px; background:rgba(5,9,15,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .rxds-modal{ width:min(560px, 100%); border-radius:var(--rx-r-xl); background:linear-gradient(180deg, var(--rx-panel-strong), rgba(9,14,22,.74)); border:1px solid var(--rx-border-cyan); -webkit-backdrop-filter:var(--rx-blur); backdrop-filter:var(--rx-blur); box-shadow:var(--rx-shadow-3), 0 0 36px var(--rx-glow); padding:var(--rx-space-6); animation:rxds-pop var(--rx-dur-3) var(--rx-ease-out); } @keyframes rxds-pop{ from{ transform:scale(.96); opacity:0; } to{ transform:scale(1); opacity:1; } } .rxds-modal__title{ font-size:var(--rx-fs-h2); font-weight:var(--rx-fw-medium); margin:0 0 var(--rx-space-2); } .rxds-modal__body{ font-size:var(--rx-fs-body); color:var(--rx-muted); } .rxds-modal__foot{ display:flex; justify-content:flex-end; gap:var(--rx-space-3); margin-top:var(--rx-space-6); } /* ─────────────────────────────────────────────────────────────────────── 12. SIDEBAR RAIL — floating navigation ─────────────────────────────────────────────────────────────────────── */ .rxds-rail{ display:inline-flex; flex-direction:column; align-items:center; gap:var(--rx-space-4); width:56px; padding:var(--rx-space-4) 0; border-radius:var(--rx-r-lg); background:linear-gradient(180deg, var(--rx-panel-strong), rgba(9,14,22,.7)); border:1px solid var(--rx-border); -webkit-backdrop-filter:var(--rx-blur); backdrop-filter:var(--rx-blur); box-shadow:var(--rx-shadow-2); } .rxds-rail__item{ position:relative; width:38px; height:38px; border-radius:var(--rx-r-sm); display:grid; place-items:center; color:var(--rx-muted); font-size:18px; background:transparent; border:1px solid transparent; cursor:pointer; transition:color var(--rx-dur-1) var(--rx-ease), background var(--rx-dur-1) var(--rx-ease); } .rxds-rail__item:hover{ color:var(--rx-text); background:rgba(255,255,255,.05); } .rxds-rail__item.is-active{ color:var(--rx-cyan-bright); background:var(--rx-cyan-soft); border-color:var(--rx-border-cyan); } .rxds-rail__item.is-active::before{ content:""; position:absolute; left:-13px; top:50%; transform:translateY(-50%); width:3px; height:18px; border-radius:var(--rx-r-pill); background:var(--rx-cyan-bright); box-shadow:0 0 8px var(--rx-cyan); } /* ─────────────────────────────────────────────────────────────────────── 13. TABLE — dense technical data ─────────────────────────────────────────────────────────────────────── */ .rxds-table{ width:100%; border-collapse:collapse; font-size:var(--rx-fs-cap); } .rxds-table th{ text-align:left; font-weight:var(--rx-fw-medium); color:var(--rx-text-3); font-size:var(--rx-fs-micro); text-transform:none; padding:8px 12px; border-bottom:1px solid var(--rx-border); position:sticky; top:0; background:var(--rx-bg-1); } .rxds-table td{ padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--rx-text); } .rxds-table tbody tr{ transition:background var(--rx-dur-1) var(--rx-ease); } .rxds-table tbody tr:hover{ background:rgba(27,212,245,.05); } .rxds-table td.rxds-td-mono, .rxds-table .rxds-td-mono{ font-family:var(--rx-font-mono); color:var(--rx-muted); } /* ─────────────────────────────────────────────────────────────────────── 14. RxBot — analyst co-pilot ─────────────────────────────────────────────────────────────────────── */ .rxds-bot{ display:flex; flex-direction:column; gap:var(--rx-space-3); } .rxds-bot__head{ display:flex; align-items:center; gap:10px; } .rxds-bot__avatar{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:var(--rx-cyan-soft); border:1px solid var(--rx-border-cyan); color:var(--rx-cyan-bright); font-size:14px; box-shadow:0 0 12px var(--rx-glow); } .rxds-bot__name{ font-size:var(--rx-fs-cap); font-weight:var(--rx-fw-medium); color:var(--rx-text); } .rxds-bot__role{ font-size:var(--rx-fs-micro); color:var(--rx-text-3); } .rxds-bot-msg{ padding:10px 12px; border-radius:var(--rx-r-md); font-size:var(--rx-fs-cap); line-height:1.55; color:var(--rx-text); background:rgba(255,255,255,.04); border:1px solid var(--rx-border); max-width:90%; } .rxds-bot-msg--user{ align-self:flex-end; background:var(--rx-cyan-soft); border-color:var(--rx-border-cyan); } /* action chips */ .rxds-chip{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 12px; font-size:var(--rx-fs-micro); font-weight:var(--rx-fw-medium); color:var(--rx-cyan-bright); background:var(--rx-cyan-soft); border:1px solid var(--rx-border-cyan); border-radius:var(--rx-r-pill); cursor:pointer; transition:background var(--rx-dur-1) var(--rx-ease), box-shadow var(--rx-dur-1) var(--rx-ease); } .rxds-chip:hover{ background:rgba(27,212,245,.18); box-shadow:0 0 12px var(--rx-glow); } /* typing indicator */ .rxds-typing{ display:inline-flex; gap:4px; align-items:center; } .rxds-typing span{ width:5px; height:5px; border-radius:50%; background:var(--rx-cyan); animation:rxds-typing 1s var(--rx-ease) infinite; } .rxds-typing span:nth-child(2){ animation-delay:.15s; } .rxds-typing span:nth-child(3){ animation-delay:.3s; } @keyframes rxds-typing{ 0%,100%{ opacity:.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } } /* ─────────────────────────────────────────────────────────────────────── 15. ATLAS primitives — same grammar as the telemetry background ─────────────────────────────────────────────────────────────────────── */ .rxds-node{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:var(--rx-r-md); font-size:var(--rx-fs-cap); color:var(--rx-text); background:rgba(255,255,255,.04); border:1px solid var(--rx-border); } .rxds-node__mark{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; } .rxds-node--process .rxds-node__mark{ background:var(--rx-cyan); } .rxds-node--file .rxds-node__mark{ background:var(--rx-info); } .rxds-node--network .rxds-node__mark{ background:var(--rx-warning); } .rxds-node--registry .rxds-node__mark{ background:var(--rx-success); } .rxds-node--threat { border-color:rgba(255,93,108,.34); box-shadow:0 0 16px rgba(255,93,108,.18); } .rxds-node--threat .rxds-node__mark{ background:var(--rx-danger); } .rxds-legend{ display:flex; flex-wrap:wrap; gap:14px; } .rxds-legend__item{ display:inline-flex; align-items:center; gap:7px; font-size:var(--rx-fs-micro); color:var(--rx-muted); } .rxds-legend__swatch{ width:9px; height:9px; border-radius:50%; } /* ─────────────────────────────────────────────────────────────────────── 16. UTILITIES ─────────────────────────────────────────────────────────────────────── */ .rxds-mono{ font-family:var(--rx-font-mono); } .rxds-muted{ color:var(--rx-muted); } .rxds-faint{ color:var(--rx-text-3); } .rxds-flow{ background:linear-gradient(180deg, #ffffff, #bfefff 60%, var(--rx-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; } .rxds-divider{ height:1px; background:linear-gradient(90deg, transparent, var(--rx-border-cyan), transparent); border:0; margin:var(--rx-space-5) 0; } .rxds-kbd{ display:inline-flex; align-items:center; height:20px; padding:0 7px; font-family:var(--rx-font-mono); font-size:var(--rx-fs-micro); color:var(--rx-muted); background:rgba(255,255,255,.05); border:1px solid var(--rx-border); border-radius:6px; } .rxds-eyebrow{ font-size:var(--rx-fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--rx-cyan); } /* ─────────────────────────────────────────────────────────────────────── 17. REDUCED MOTION — honour the user's OS preference ─────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ .rxds-card--live{ animation:none; box-shadow:var(--rx-shadow-2), 0 0 24px var(--rx-glow); } .rxds-typing span{ animation:none; opacity:.7; } .rxds-btn.is-loading::after{ animation-duration:1.4s; } .rxds-modal{ animation:none; } .rxds-card, .rxds-btn, .rxds-chip{ transition:none; } }