/* ux-primitives.bundle.css — canonical Bundle-B UX primitives (generated 2026-09-23T00:57:00Z) Shared ux-primitives.css tokens (md5 614018b) included ONCE, then each primitive's own CSS. All selectors namespaced .ux-* / .ux-bento* / .ux-modal* so nothing collides with corner-nav (cnav-*), hero-4grid, or site styles. Regenerate via /Users/macstudio3/Projects/_shared/scripts/build-ux-primitives-bundle.sh */ /* ===== shared tokens (ux-primitives.css) ===== */ /* ============================================================================ ux-primitives.css — the SHARED token/base layer for the UX build-feature set (toast-notify · skeleton-loader · empty-state · command-palette · copy-to-clipboard). ONE cohesive design system, not N divergent conventions. Every component in the set reads these `--ux-*` custom properties, so the whole set shares one spacing scale, one radius scale, one color palette, one motion curve, and one dark-mode approach. Load this file ONCE per page (before or after the component CSS — cascade order does not matter for tokens) and every component inherits the same look. Resilience: every component ALSO hard-codes a literal fallback in each `var(--ux-*, )`, so a component still renders correctly even if this file is not loaded. Loading it is what makes the set cohesive; not loading it just falls back to sensible defaults. Theme-agnostic: the tokens themselves fall back to the HOST page's own vars where a page already defines them (--accent, --ink, --card, --line, …), so dropping the set onto an existing themed page inherits that theme with no config. Override any --ux-* on :root (or a subtree) to retheme the whole set. Dark mode, three ways (in priority order, last wins): 1. default :root palette = LIGHT 2. @media (prefers-color-scheme: dark) → auto dark by OS setting 3. [data-theme="dark"] / [data-theme="light"] on → explicit override ============================================================================ */ :root { /* ---- spacing scale (4px base) ---- */ --ux-space-0: 0; --ux-space-1: 4px; --ux-space-2: 8px; --ux-space-3: 12px; --ux-space-4: 16px; --ux-space-5: 24px; --ux-space-6: 32px; --ux-space-7: 48px; /* ---- radius scale ---- */ --ux-radius-sm: 6px; --ux-radius-md: 10px; --ux-radius-lg: 16px; --ux-radius-pill: 999px; /* ---- typography ---- */ --ux-font: inherit; /* inherit the host page's font stack */ --ux-fs-xs: 11px; --ux-fs-sm: 12.5px; --ux-fs-md: 14px; --ux-fs-lg: 16px; --ux-fw-normal: 400; --ux-fw-medium: 550; --ux-fw-bold: 700; /* ---- motion ---- */ --ux-ease: cubic-bezier(.4, 0, .2, 1); --ux-dur-fast: 120ms; --ux-dur: 200ms; --ux-dur-slow: 320ms; /* ---- z-index bands ---- */ --ux-z-toast: 2147483000; --ux-z-palette: 2147482000; /* ---- semantic colors (LIGHT palette; fall back to any host var first) ---- */ --ux-bg: var(--bg, #ffffff); --ux-surface: var(--card, #ffffff); --ux-surface-2: var(--card2, #f3f4f6); --ux-text: var(--ink, #1a1d24); --ux-text-dim: var(--mut, var(--muted, #5c6470)); --ux-border: var(--line, rgba(0,0,0,.12)); --ux-hover: var(--hover, rgba(0,0,0,.04)); --ux-accent: var(--accent, var(--blue, #2563eb)); --ux-accent-contrast: #ffffff; --ux-focus: var(--ux-accent, #2563eb); /* skeleton shimmer track */ --ux-skel-base: var(--card2, #e6e8ec); --ux-skel-sheen: rgba(255,255,255,.55); /* status colors + subtle tinted backgrounds */ --ux-success: #128a4b; --ux-success-bg: #e7f6ee; --ux-error: #c62b34; --ux-error-bg: #fdeaea; --ux-warn: #a5730a; --ux-warn-bg: #fbf1dc; --ux-info: #2563eb; --ux-info-bg: #e8effd; /* elevation */ --ux-shadow-1: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06); --ux-shadow-2: 0 8px 24px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.10); color-scheme: light; } /* ---- auto dark by OS, only when the page hasn't forced light ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ux-bg: var(--bg, #0d1017); --ux-surface: var(--card, #161b22); --ux-surface-2: var(--card2, #21262d); --ux-text: var(--ink, #e6edf3); --ux-text-dim: var(--mut, var(--muted, #8b949e)); --ux-border: var(--line, rgba(255,255,255,.12)); --ux-hover: var(--hover, rgba(120,160,255,.08)); --ux-accent: var(--accent, var(--blue, #58a6ff)); --ux-accent-contrast: #08111f; --ux-skel-base: var(--card2, #21262d); --ux-skel-sheen: rgba(255,255,255,.10); --ux-success: #3fb950; --ux-success-bg: #12281a; --ux-error: #f85149; --ux-error-bg: #2c1416; --ux-warn: #d29922; --ux-warn-bg: #2a2113; --ux-info: #58a6ff; --ux-info-bg: #10233f; --ux-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35); --ux-shadow-2: 0 10px 30px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4); color-scheme: dark; } } /* ---- explicit dark override (wins over OS + over light) ---- */ :root[data-theme="dark"] { --ux-bg: var(--bg, #0d1017); --ux-surface: var(--card, #161b22); --ux-surface-2: var(--card2, #21262d); --ux-text: var(--ink, #e6edf3); --ux-text-dim: var(--mut, var(--muted, #8b949e)); --ux-border: var(--line, rgba(255,255,255,.12)); --ux-hover: var(--hover, rgba(120,160,255,.08)); --ux-accent: var(--accent, var(--blue, #58a6ff)); --ux-accent-contrast: #08111f; --ux-skel-base: var(--card2, #21262d); --ux-skel-sheen: rgba(255,255,255,.10); --ux-success: #3fb950; --ux-success-bg: #12281a; --ux-error: #f85149; --ux-error-bg: #2c1416; --ux-warn: #d29922; --ux-warn-bg: #2a2113; --ux-info: #58a6ff; --ux-info-bg: #10233f; --ux-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35); --ux-shadow-2: 0 10px 30px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4); color-scheme: dark; } /* a shared focus ring every component can opt into with .ux-focusable */ .ux-focusable:focus-visible { outline: 2px solid var(--ux-focus, #2563eb); outline-offset: 2px; } /* ===== toast-notify ===== */ /* toast-notify.css — transient toast/notification stack. * Part of the UX build-feature set; inherits tokens from ux-primitives.css. * Every color/space reads a --ux-* token with a literal fallback, so it renders * fine standalone but themes cohesively when ux-primitives.css is loaded. */ .ux-toast-region { position: fixed; z-index: var(--ux-z-toast, 2147483000); display: flex; flex-direction: column; gap: var(--ux-space-2, 8px); padding: var(--ux-space-4, 16px); width: min(360px, calc(100vw - 24px)); max-height: 100vh; overflow: hidden; pointer-events: none; /* region is click-through; toasts opt back in */ box-sizing: border-box; } /* positions (safe-area aware) */ .ux-toast-region[data-pos^="top"] { top: 0; padding-top: calc(var(--ux-space-4,16px) + env(safe-area-inset-top,0px)); } .ux-toast-region[data-pos^="bottom"] { bottom: 0; padding-bottom: calc(var(--ux-space-4,16px) + env(safe-area-inset-bottom,0px)); flex-direction: column-reverse; } .ux-toast-region[data-pos$="right"] { right: 0; align-items: flex-end; } .ux-toast-region[data-pos$="left"] { left: 0; align-items: flex-start; } .ux-toast-region[data-pos$="center"] { left: 50%; transform: translateX(-50%); align-items: center; } .ux-toast { pointer-events: auto; box-sizing: border-box; width: 100%; display: flex; align-items: flex-start; gap: var(--ux-space-3, 12px); padding: var(--ux-space-3, 12px) var(--ux-space-4, 16px); background: var(--ux-surface, #fff); color: var(--ux-text, #1a1d24); border: 1px solid var(--ux-border, rgba(0,0,0,.12)); border-left: 4px solid var(--ux-accent, #2563eb); border-radius: var(--ux-radius-md, 10px); box-shadow: var(--ux-shadow-2, 0 8px 24px rgba(0,0,0,.14)); font: var(--ux-fw-normal,400) var(--ux-fs-md,14px)/1.45 var(--ux-font, inherit); transition: transform var(--ux-dur,200ms) var(--ux-ease, ease), opacity var(--ux-dur,200ms) var(--ux-ease, ease); } /* enter/exit — direction depends on which edge the region sits on */ .ux-toast[data-state="enter"] { opacity: 0; transform: translateY(-8px) scale(.98); } .ux-toast-region[data-pos^="bottom"] .ux-toast[data-state="enter"] { transform: translateY(8px) scale(.98); } .ux-toast[data-state="shown"] { opacity: 1; transform: none; } .ux-toast[data-state="leave"] { opacity: 0; transform: translateX(12px) scale(.98); } .ux-toast-region[data-pos$="left"] .ux-toast[data-state="leave"] { transform: translateX(-12px) scale(.98); } .ux-toast-region[data-pos$="center"] .ux-toast[data-state="leave"] { transform: scale(.96); } /* variant accents */ .ux-toast--success { border-left-color: var(--ux-success, #128a4b); } .ux-toast--error { border-left-color: var(--ux-error, #c62b34); } .ux-toast--warn { border-left-color: var(--ux-warn, #a5730a); } .ux-toast--info { border-left-color: var(--ux-info, #2563eb); } .ux-toast__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; display: grid; place-items: center; font-size: 14px; line-height: 1; } .ux-toast--success .ux-toast__icon { color: var(--ux-success, #128a4b); } .ux-toast--error .ux-toast__icon { color: var(--ux-error, #c62b34); } .ux-toast--warn .ux-toast__icon { color: var(--ux-warn, #a5730a); } .ux-toast--info .ux-toast__icon { color: var(--ux-info, #2563eb); } .ux-toast__body { flex: 1 1 auto; min-width: 0; } .ux-toast__title { font-weight: var(--ux-fw-medium, 550); margin: 0 0 2px; } .ux-toast__msg { color: var(--ux-text, #1a1d24); word-wrap: break-word; overflow-wrap: anywhere; } .ux-toast__title + .ux-toast__msg { color: var(--ux-text-dim, #5c6470); font-size: var(--ux-fs-sm, 12.5px); } .ux-toast__close { flex: 0 0 auto; appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--ux-text-dim, #5c6470); font-size: 18px; line-height: 1; padding: 2px 4px; margin: -2px -4px 0 0; border-radius: var(--ux-radius-sm, 6px); } .ux-toast__close:hover { background: var(--ux-hover, rgba(0,0,0,.06)); color: var(--ux-text, #1a1d24); } .ux-toast__close:focus-visible { outline: 2px solid var(--ux-focus, #2563eb); outline-offset: 2px; } /* auto-dismiss progress bar (thin, under the toast) */ .ux-toast__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .35; transform-origin: left; } .ux-toast { position: relative; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .ux-toast { transition: opacity var(--ux-dur,200ms) linear; } .ux-toast[data-state="enter"], .ux-toast[data-state="leave"] { transform: none; } .ux-toast__bar { transition: none !important; } } /* ===== skeleton-loader ===== */ /* skeleton-loader.css — content-placeholder shimmer skeletons. * Part of the UX build-feature set; inherits tokens from ux-primitives.css. * Standalone-safe: every --ux-* has a literal fallback. */ .ux-skel { display: block; position: relative; overflow: hidden; background: var(--ux-skel-base, #e6e8ec); border-radius: var(--ux-radius-sm, 6px); } /* the moving sheen */ .ux-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent 0, var(--ux-skel-sheen, rgba(255,255,255,.55)) 50%, transparent 100%); animation: ux-skel-shimmer 1.3s var(--ux-ease, ease) infinite; } @keyframes ux-skel-shimmer { 100% { transform: translateX(100%); } } /* ---- primitives ---- */ .ux-skel--text { height: .8em; margin: .35em 0; border-radius: var(--ux-radius-sm, 6px); } .ux-skel--title { height: 1.15em; width: 55%; margin: .2em 0 .6em; } .ux-skel--avatar { width: 44px; height: 44px; border-radius: var(--ux-radius-pill, 999px); flex: 0 0 auto; } .ux-skel--image { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--ux-radius-md, 10px); } .ux-skel--thumb { width: 56px; height: 56px; border-radius: var(--ux-radius-md, 10px); flex: 0 0 auto; } .ux-skel--chip { height: 22px; width: 64px; border-radius: var(--ux-radius-pill, 999px); } .ux-skel--btn { height: 34px; width: 96px; border-radius: var(--ux-radius-md, 10px); } /* width helpers for text lines (last line short, like real paragraphs) */ .ux-skel--w90 { width: 90%; } .ux-skel--w75 { width: 75%; } .ux-skel--w60 { width: 60%; } .ux-skel--w40 { width: 40%; } /* ---- composed blocks ---- */ .ux-skel-lines { display: block; } .ux-skel-card { display: block; padding: var(--ux-space-4, 16px); border: 1px solid var(--ux-border, rgba(0,0,0,.12)); border-radius: var(--ux-radius-lg, 16px); background: var(--ux-surface, #fff); } .ux-skel-row { display: flex; align-items: center; gap: var(--ux-space-3, 12px); padding: var(--ux-space-3, 12px) 0; border-bottom: 1px solid var(--ux-border, rgba(0,0,0,.10)); } .ux-skel-row__body { flex: 1 1 auto; min-width: 0; } .ux-skel-media { display: flex; align-items: center; gap: var(--ux-space-3, 12px); } .ux-skel-media__body { flex: 1 1 auto; min-width: 0; } /* content-swap fade: real content fades in when ready */ [data-ux-skel-host] { position: relative; } .ux-skel-in { animation: ux-skel-fadein var(--ux-dur-slow, 320ms) var(--ux-ease, ease) both; } @keyframes ux-skel-fadein { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ux-skel::after { animation: none; opacity: .5; } .ux-skel-in { animation: none; } } /* ===== empty-state ===== */ /* empty-state.css — reusable empty / zero-results / error / offline block. * Part of the UX build-feature set; inherits tokens from ux-primitives.css. * Standalone-safe: every --ux-* has a literal fallback. */ .ux-empty { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ux-space-3, 12px); max-width: 420px; margin: 0 auto; padding: var(--ux-space-7, 48px) var(--ux-space-4, 16px); color: var(--ux-text, #1a1d24); font: var(--ux-fw-normal,400) var(--ux-fs-md,14px)/1.5 var(--ux-font, inherit); } .ux-empty__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--ux-radius-pill, 999px); background: var(--ux-surface-2, #f3f4f6); color: var(--ux-text-dim, #5c6470); margin-bottom: var(--ux-space-1, 4px); } .ux-empty__icon svg { width: 28px; height: 28px; display: block; } /* variant icon tints */ .ux-empty--error .ux-empty__icon { background: var(--ux-error-bg,#fdeaea); color: var(--ux-error,#c62b34); } .ux-empty--offline .ux-empty__icon { background: var(--ux-warn-bg,#fbf1dc); color: var(--ux-warn,#a5730a); } .ux-empty--no-results .ux-empty__icon, .ux-empty--no-data .ux-empty__icon { background: var(--ux-info-bg,#e8effd); color: var(--ux-info,#2563eb); } .ux-empty__title { margin: 0; font-size: var(--ux-fs-lg, 16px); font-weight: var(--ux-fw-bold, 700); } .ux-empty__text { margin: 0; color: var(--ux-text-dim, #5c6470); } .ux-empty__actions { display: flex; flex-wrap: wrap; gap: var(--ux-space-2, 8px); justify-content: center; margin-top: var(--ux-space-2, 8px); } .ux-empty__btn { appearance: none; cursor: pointer; font: var(--ux-fw-medium,550) var(--ux-fs-md,14px)/1 var(--ux-font, inherit); padding: 10px 18px; border-radius: var(--ux-radius-md, 10px); border: 1px solid var(--ux-border, rgba(0,0,0,.14)); background: var(--ux-surface, #fff); color: var(--ux-text, #1a1d24); text-decoration: none; transition: background var(--ux-dur-fast,120ms) var(--ux-ease, ease), border-color var(--ux-dur-fast,120ms) var(--ux-ease, ease); } .ux-empty__btn:hover { background: var(--ux-hover, rgba(0,0,0,.05)); } .ux-empty__btn:focus-visible { outline: 2px solid var(--ux-focus, #2563eb); outline-offset: 2px; } .ux-empty__btn--primary { background: var(--ux-accent, #2563eb); border-color: var(--ux-accent, #2563eb); color: var(--ux-accent-contrast, #fff); } .ux-empty__btn--primary:hover { filter: brightness(1.06); background: var(--ux-accent, #2563eb); } @media (max-width: 420px) { .ux-empty { padding: var(--ux-space-6, 32px) var(--ux-space-4, 16px); } .ux-empty__actions { flex-direction: column; align-self: stretch; } .ux-empty__btn { width: 100%; } } /* ===== copy-to-clipboard ===== */ /* copy-to-clipboard.css — copy button + "Copied!" feedback. * Part of the UX build-feature set; inherits tokens from ux-primitives.css. * OPTIONAL: the JS works on any element; these styles just make a nice button * and the inline feedback pill. Standalone-safe: every --ux-* has a fallback. */ .ux-copy { display: inline-flex; align-items: center; gap: var(--ux-space-2, 8px); appearance: none; cursor: pointer; font: var(--ux-fw-medium,550) var(--ux-fs-sm,12.5px)/1 var(--ux-font, inherit); padding: 7px 12px; border-radius: var(--ux-radius-md, 10px); border: 1px solid var(--ux-border, rgba(0,0,0,.14)); background: var(--ux-surface, #fff); color: var(--ux-text, #1a1d24); position: relative; transition: background var(--ux-dur-fast,120ms) var(--ux-ease, ease), border-color var(--ux-dur-fast,120ms) var(--ux-ease, ease); } .ux-copy:hover { background: var(--ux-hover, rgba(0,0,0,.05)); } .ux-copy:focus-visible { outline: 2px solid var(--ux-focus, #2563eb); outline-offset: 2px; } .ux-copy__ic { width: 15px; height: 15px; flex: 0 0 auto; } .ux-copy__ic svg { width: 15px; height: 15px; display: block; } /* success + error states (toggled briefly by the JS) */ .ux-copy.is-copied { border-color: var(--ux-success, #128a4b); color: var(--ux-success, #128a4b); } .ux-copy.is-error { border-color: var(--ux-error, #c62b34); color: var(--ux-error, #c62b34); } /* floating "Copied!" pill (inline feedback mode), anchored above the trigger */ .ux-copy-pill { position: absolute; z-index: var(--ux-z-toast, 2147483000); transform: translate(-50%, -100%); margin-top: -8px; padding: 4px 9px; border-radius: var(--ux-radius-pill, 999px); background: var(--ux-text, #1a1d24); color: var(--ux-bg, #fff); font: var(--ux-fw-medium,550) var(--ux-fs-xs,11px)/1.3 var(--ux-font, inherit); white-space: nowrap; box-shadow: var(--ux-shadow-1, 0 2px 8px rgba(0,0,0,.2)); pointer-events: none; opacity: 0; transition: opacity var(--ux-dur-fast,120ms) var(--ux-ease, ease), transform var(--ux-dur-fast,120ms) var(--ux-ease, ease); } .ux-copy-pill[data-show="true"] { opacity: 1; transform: translate(-50%, -100%) translateY(-2px); } .ux-copy-pill.is-error { background: var(--ux-error, #c62b34); color: #fff; } @media (prefers-reduced-motion: reduce) { .ux-copy, .ux-copy-pill { transition: opacity var(--ux-dur-fast,120ms) linear; } } /* ===== command-palette ===== */ /* command-palette.css — cmd-k / ctrl-k command palette. * Part of the UX build-feature set; inherits tokens from ux-primitives.css. * Standalone-safe: every --ux-* has a literal fallback. */ .ux-cmdk-backdrop { position: fixed; inset: 0; z-index: var(--ux-z-palette, 2147482000); background: rgba(10, 12, 18, .48); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: flex-start; padding: clamp(24px, 12vh, 140px) 16px 16px; opacity: 0; transition: opacity var(--ux-dur-fast,120ms) var(--ux-ease, ease); } .ux-cmdk-backdrop[data-open="true"] { opacity: 1; } .ux-cmdk { box-sizing: border-box; width: min(620px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--ux-surface, #fff); color: var(--ux-text, #1a1d24); border: 1px solid var(--ux-border, rgba(0,0,0,.14)); border-radius: var(--ux-radius-lg, 16px); box-shadow: var(--ux-shadow-2, 0 18px 50px rgba(0,0,0,.35)); overflow: hidden; transform: translateY(-6px) scale(.99); transition: transform var(--ux-dur,200ms) var(--ux-ease, ease); font: var(--ux-fw-normal,400) var(--ux-fs-md,14px)/1.4 var(--ux-font, inherit); } .ux-cmdk-backdrop[data-open="true"] .ux-cmdk { transform: none; } .ux-cmdk__head { display: flex; align-items: center; gap: var(--ux-space-3,12px); padding: var(--ux-space-4,16px); border-bottom: 1px solid var(--ux-border, rgba(0,0,0,.10)); } .ux-cmdk__search-ic { flex: 0 0 auto; color: var(--ux-text-dim, #5c6470); display: grid; place-items: center; } .ux-cmdk__search-ic svg { width: 18px; height: 18px; display: block; } .ux-cmdk__input { flex: 1 1 auto; min-width: 0; appearance: none; border: 0; outline: 0; background: transparent; color: var(--ux-text, #1a1d24); font: var(--ux-fw-normal,400) var(--ux-fs-lg,16px)/1.2 var(--ux-font, inherit); } .ux-cmdk__input::placeholder { color: var(--ux-text-dim, #8b949e); } .ux-cmdk__kbd { flex: 0 0 auto; font-size: 11px; color: var(--ux-text-dim,#8b949e); border: 1px solid var(--ux-border, rgba(0,0,0,.14)); border-radius: var(--ux-radius-sm,6px); padding: 2px 6px; } .ux-cmdk__list { list-style: none; margin: 0; padding: var(--ux-space-2,8px); overflow-y: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; } .ux-cmdk__group { padding: var(--ux-space-3,12px) var(--ux-space-3,12px) var(--ux-space-1,4px); font-size: var(--ux-fs-xs,11px); text-transform: uppercase; letter-spacing: .06em; color: var(--ux-text-dim, #8b949e); font-weight: var(--ux-fw-medium,550); } .ux-cmdk__opt { display: flex; align-items: center; gap: var(--ux-space-3,12px); padding: 10px var(--ux-space-3,12px); border-radius: var(--ux-radius-md, 10px); cursor: pointer; scroll-margin: 8px; } .ux-cmdk__opt[aria-selected="true"] { background: var(--ux-accent, #2563eb); color: var(--ux-accent-contrast,#fff); } .ux-cmdk__opt[aria-selected="true"] .ux-cmdk__sub { color: var(--ux-accent-contrast,#fff); opacity: .85; } .ux-cmdk__opt[aria-selected="true"] .ux-cmdk__ic { color: var(--ux-accent-contrast,#fff); } .ux-cmdk__ic { flex: 0 0 auto; width: 20px; text-align: center; color: var(--ux-text-dim,#5c6470); } .ux-cmdk__opt-body { flex: 1 1 auto; min-width: 0; } .ux-cmdk__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ux-cmdk__sub { font-size: var(--ux-fs-sm,12.5px); color: var(--ux-text-dim,#8b949e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ux-cmdk__hint { flex: 0 0 auto; font-size: 11px; color: var(--ux-text-dim,#8b949e); } .ux-cmdk__opt[aria-selected="true"] .ux-cmdk__hint { color: var(--ux-accent-contrast,#fff); opacity: .85; } .ux-cmdk__empty { padding: var(--ux-space-6,32px); text-align: center; color: var(--ux-text-dim,#8b949e); } @media (max-width: 420px) { .ux-cmdk-backdrop { padding-top: 24px; } .ux-cmdk { max-height: 82vh; } .ux-cmdk__kbd { display: none; } } @media (prefers-reduced-motion: reduce) { .ux-cmdk-backdrop, .ux-cmdk { transition: opacity var(--ux-dur-fast,120ms) linear; } .ux-cmdk { transform: none; } } /* ===== modal-rig ===== */ /* ============================================================================ modal-rig.css — token-driven styling for ModalRig modals/panels. Part of the UX build-feature set (shares ux-primitives.css `--ux-*` tokens). modal-rig.js works with ZERO css (it hard-codes structural inline styles as a fallback), but loading this file makes the modal theme cohesively with the rest of the set and inherit the host page's dark-mode + accent. Every rule below is namespaced `.ux-modal*` so it cannot clobber existing site styles. ============================================================================ */ .ux-modal-backdrop { position: fixed; inset: 0; z-index: var(--ux-z-palette, 2147482000); background: rgba(0, 0, 0, .5); } .ux-modal { display: flex; flex-direction: column; min-width: 340px; min-height: 180px; background: var(--ux-surface, #fff); color: var(--ux-text, #1a1d24); border: 1px solid var(--ux-border, rgba(0, 0, 0, .12)); border-radius: var(--ux-radius-md, 10px); box-shadow: var(--ux-shadow-2, 0 16px 56px rgba(0, 0, 0, .6)); font: var(--ux-font, inherit); } .ux-modal__head { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--ux-space-2, 8px); padding: var(--ux-space-3, 12px) var(--ux-space-4, 16px); border-bottom: 1px solid var(--ux-border, rgba(0, 0, 0, .12)); background: var(--ux-surface-2, #f3f4f6); border-radius: var(--ux-radius-md, 10px) var(--ux-radius-md, 10px) 0 0; } .ux-modal__title { font-weight: var(--ux-fw-medium, 550); font-size: var(--ux-fs-sm, 12.5px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ux-modal__btns { flex: 0 0 auto; display: flex; align-items: center; } .ux-modal__btn { cursor: pointer; opacity: .7; line-height: 1; margin-left: var(--ux-space-2, 8px); background: none; border: 0; color: inherit; font-size: 14px; transition: opacity var(--ux-dur-fast, 120ms) var(--ux-ease, ease); } .ux-modal__btn:hover { opacity: 1; } .ux-modal__close { font-size: 18px; } .ux-modal__body { flex: 1 1 auto; overflow: auto; padding: var(--ux-space-4, 16px) var(--ux-space-5, 24px); } /* the corner resize grip is native (resize:both); nudge its color for visibility */ .ux-modal { resize: both; } @media (prefers-reduced-motion: reduce) { .ux-modal__btn { transition: none; } } /* ===== bento-grid ===== */ /* ============================================================================ bento-grid.css — a zero-dependency editorial "bento box" layout system. Namespaced .ux-bento / .ux-bento-item so it can't clobber existing site CSS. Part of the UX build-feature set — its knobs default to ux-primitives.css `--ux-*` tokens (with literal fallbacks), so it themes with the rest of the set and inherits the host page's dark mode. Nothing here is !important. Add class="ux-bento" to a container, class="ux-bento-item" + a size on each child (data-span="CxR", or .is-wide/.is-tall/.is-big/.is-hero). Multi-column spans collapse to full width on narrow viewports. ============================================================================ */ .ux-bento { --ux-bento-cols: 4; --ux-bento-gap: var(--ux-space-4, 16px); --ux-bento-row: 180px; --ux-bento-radius: var(--ux-radius-lg, 18px); --ux-bento-pad: var(--ux-space-5, 20px); --ux-bento-bg: var(--ux-surface, #14161d); --ux-bento-fg: var(--ux-text, #e7e9f0); --ux-bento-dim: var(--ux-text-dim, #98a1b3); --ux-bento-border: var(--ux-border, rgba(255, 255, 255, .08)); --ux-bento-accent: var(--ux-accent, #c9a227); --ux-bento-lift: var(--ux-shadow-2, 0 10px 30px rgba(0, 0, 0, .35)); display: grid; grid-template-columns: repeat(var(--ux-bento-cols), minmax(0, 1fr)); grid-auto-rows: var(--ux-bento-row); grid-auto-flow: row dense; gap: var(--ux-bento-gap); align-items: stretch; font: var(--ux-font, inherit); } .ux-bento-item { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: var(--ux-bento-pad); border-radius: var(--ux-bento-radius); background: var(--ux-bento-bg); color: var(--ux-bento-fg); border: 1px solid var(--ux-bento-border); overflow: hidden; text-decoration: none; isolation: isolate; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } a.ux-bento-item, .ux-bento-item[data-href] { cursor: pointer; } a.ux-bento-item:hover, .ux-bento-item[data-href]:hover { transform: translateY(-3px); box-shadow: var(--ux-bento-lift); border-color: color-mix(in srgb, var(--ux-bento-accent) 55%, transparent); } .ux-bento-item:focus-visible { outline: 2px solid var(--ux-bento-accent); outline-offset: 2px; } .ux-bento-item.has-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--ux-bento-img); background-size: cover; background-position: center; transform: scale(1.001); transition: transform .4s ease; } a.ux-bento-item:hover.has-image::before { transform: scale(1.06); } .ux-bento-item.has-image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .66) 100%); } .ux-bento-item .eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ux-bento-accent); font-weight: 600; } .ux-bento-item .title { font-size: 18px; font-weight: 650; line-height: 1.2; margin: 0; } .ux-bento-item .desc { font-size: 13px; color: var(--ux-bento-dim); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ux-bento-item .cta { font-size: 13px; font-weight: 600; color: var(--ux-bento-accent); margin-top: 2px; } .ux-bento-item.is-stat { justify-content: center; align-items: flex-start; } .ux-bento-item.is-stat .stat { font-size: clamp(30px, 5vw, 52px); font-weight: 750; line-height: 1; } .ux-bento-item.is-stat .label { font-size: 13px; color: var(--ux-bento-dim); } .ux-bento-item.is-accent { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ux-bento-accent) 26%, transparent), transparent 60%), var(--ux-bento-bg); border-color: color-mix(in srgb, var(--ux-bento-accent) 35%, transparent); } /* ---- SPANS ---- */ .ux-bento-item.is-wide { grid-column: span 2; } .ux-bento-item.is-tall { grid-row: span 2; } .ux-bento-item.is-big { grid-column: span 2; grid-row: span 2; } .ux-bento-item.is-hero { grid-column: span 3; grid-row: span 2; } .ux-bento-item[data-span="2x1"] { grid-column: span 2; grid-row: span 1; } .ux-bento-item[data-span="1x2"] { grid-column: span 1; grid-row: span 2; } .ux-bento-item[data-span="2x2"] { grid-column: span 2; grid-row: span 2; } .ux-bento-item[data-span="3x1"] { grid-column: span 3; grid-row: span 1; } .ux-bento-item[data-span="3x2"] { grid-column: span 3; grid-row: span 2; } .ux-bento-item[data-span="4x1"] { grid-column: span 4; grid-row: span 1; } .ux-bento-item[data-span="2x3"] { grid-column: span 2; grid-row: span 3; } /* ---- RESPONSIVE ---- */ @media (max-width: 960px) { .ux-bento { --ux-bento-cols: 3; } .ux-bento-item.is-hero, .ux-bento-item[data-span="4x1"], .ux-bento-item[data-span="3x2"], .ux-bento-item[data-span="3x1"] { grid-column: span 3; } } @media (max-width: 640px) { .ux-bento { --ux-bento-cols: 2; --ux-bento-row: 150px; } .ux-bento-item[data-span], .ux-bento-item.is-wide, .ux-bento-item.is-big, .ux-bento-item.is-hero { grid-column: span 2; } .ux-bento-item.is-tall, .ux-bento-item[data-span="1x2"] { grid-row: span 2; grid-column: span 1; } } @media (max-width: 420px) { .ux-bento { --ux-bento-cols: 1; } .ux-bento-item, .ux-bento-item[data-span], .ux-bento-item.is-wide, .ux-bento-item.is-big, .ux-bento-item.is-hero { grid-column: span 1; } } @media (prefers-reduced-motion: reduce) { .ux-bento-item, .ux-bento-item::before { transition: none; } }