← back to 1960swallpaper
public/ux-primitives.bundle.css
765 lines
/* 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-*, <fallback>)`, 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 <html> → 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; }
}