/* StrmrX shared chrome — --sx-* design tokens + base components. Copied into the build (not forked); an app skin layers its accent on top. */ :root { --sx-bg: #0d0f14; --sx-surface: #161a22; --sx-surface-2: #1e2430; --sx-border: #2a3140; --sx-text: #eef1f6; --sx-muted: #9aa5b6; --sx-faint: #626c7d; --sx-accent: #a855f7; --sx-accent-ink:#ffffff; --sx-danger: #ef4444; --sx-radius: 14px; --sx-radius-sm: 9px; --sx-shadow: 0 8px 30px rgba(0,0,0,.35); /* StrmrX Motion System — premium motion = feathered easing + a HAIR of overshoot-and-settle + asymmetric enter/exit. Every interactive element uses these tokens, never ad-hoc timings. Full rules in the sx-design skill. */ --sx-ease: cubic-bezier(.2,0,0,1); /* standard default (decelerating) */ --sx-ease-out: cubic-bezier(.05,.7,.1,1); /* emphasized decelerate — enters / settle */ --sx-ease-in: cubic-bezier(.3,0,.8,.15); /* accelerate — exits (get out of the way) */ --sx-ease-in-out: cubic-bezier(.65,.05,.36,1); /* feathered both ends — on-screen reflow */ --sx-spring: cubic-bezier(.34,1.3,.64,1); /* premium pop: overshoot ~a hair, settle */ --sx-spring-strong: cubic-bezier(.34,1.56,.64,1); /* livelier bounce — rare delight moments only */ --sx-dur-fast: .14s; /* taps, toggles, hovers */ --sx-dur-base: .24s; /* popovers, menus, small enters */ --sx-dur-slow: .34s; /* modals, sheets, cards */ --sx-dur-in: .24s; /* enter — springy */ --sx-dur-out: .42s; /* exit / settle-back — slower + smooth (asymmetry reads premium) */ --sx-stagger: 40ms; /* per-item cascade delay (cap ~8 items) */ --sx-press-scale: .96; /* how much a control compresses on :active */ --sx-dur: .16s; --sx-dur-lg: .3s; /* legacy aliases */ --sx-font: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; --sx-mono: 'SFMono-Regular', ui-monospace, 'Cascadia Code', Consolas, monospace; /* local mappings a skin can re-point */ --accent: var(--sx-accent); --surface: var(--sx-surface); --border: var(--sx-border); --muted: var(--sx-muted); } /* ---------- Motion Personality ---------- The app's *voice*: the mechanical motion tokens above are the grammar; a personality retunes the same dials to match the app's feeling. Set it once on and every build feels distinct but still premium. (Full guidance — per-moment energy, rules — in the sx-design skill.) */ [data-motion="precise"] { /* dashboards, finance, dev tools — exact, trustworthy */ --sx-spring: cubic-bezier(.2,0,0,1); --sx-ease-out: cubic-bezier(.2,0,0,1); --sx-ease-in: cubic-bezier(.4,0,1,1); --sx-dur-in: .16s; --sx-dur-out: .28s; --sx-stagger: 0ms; --sx-press-scale: .985; } [data-motion="calm"] { /* wellness, luxury, reading — unhurried, elegant */ --sx-spring: cubic-bezier(.34,1.1,.6,1); --sx-ease-out: cubic-bezier(.33,0,.2,1); --sx-ease-in: cubic-bezier(.4,0,.4,1); --sx-dur-in: .34s; --sx-dur-out: .52s; --sx-stagger: 60ms; --sx-press-scale: .985; } [data-motion="friendly"] { /* consumer / community / streamer tools — StrmrX default */ --sx-spring: cubic-bezier(.34,1.3,.5,1); --sx-ease-out: cubic-bezier(.2,0,0,1); --sx-ease-in: cubic-bezier(.4,0,.6,1); --sx-dur-in: .24s; --sx-dur-out: .42s; --sx-stagger: 40ms; --sx-press-scale: .96; } [data-motion="playful"] { /* games, kids, delight-forward — bouncy, toy-like */ --sx-spring: cubic-bezier(.34,1.56,.64,1); --sx-ease-out: cubic-bezier(.2,0,0,1); --sx-ease-in: cubic-bezier(.5,0,.75,0); --sx-dur-in: .26s; --sx-dur-out: .44s; --sx-stagger: 55ms; --sx-press-scale: .93; } [data-motion="energetic"] { /* live overlays, hype, sports — fast, punchy, bold */ --sx-spring: cubic-bezier(.22,1.4,.36,1); --sx-ease-out: cubic-bezier(.15,.9,.2,1); --sx-ease-in: cubic-bezier(.55,0,1,.45); --sx-dur-in: .18s; --sx-dur-out: .32s; --sx-stagger: 25ms; --sx-press-scale: .95; } [data-motion="confident"] { /* bold brand, marketing hero — assertive, stable, no wobble */ --sx-spring: cubic-bezier(.16,1.1,.3,1); --sx-ease-out: cubic-bezier(.16,1,.3,1); --sx-ease-in: cubic-bezier(.7,0,.84,0); --sx-dur-in: .26s; --sx-dur-out: .4s; --sx-stagger: 45ms; --sx-press-scale: .97; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { position: relative; min-height: 100vh; background: var(--sx-bg); color: var(--sx-text); font-family: var(--sx-font); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* The StrmrX "world" backdrop: same structure family-wide — aurora glows + a faint grid — but tinted by each app's accent, so builds feel related without being identical. An app skin sets --sx-glow-1/2 to steer its own flavour. */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(52% 46% at 6% -6%, color-mix(in srgb, var(--sx-glow-1, var(--accent)) 30%, transparent), transparent 62%), radial-gradient(46% 42% at 101% 6%, color-mix(in srgb, var(--sx-glow-2, var(--accent-soft, var(--accent))) 24%, transparent), transparent 60%), radial-gradient(62% 58% at 50% 118%, color-mix(in srgb, var(--sx-glow-1, var(--accent)) 18%, transparent), transparent 60%), linear-gradient(180deg, var(--sx-bg-hi, #171c29), var(--sx-bg) 42%, var(--sx-bg-lo, #08090e)); } body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, color-mix(in srgb, var(--sx-text) 8%, transparent) 1px, transparent 1.5px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(92% 72% at 50% 22%, #000 0%, transparent 80%); mask-image: radial-gradient(92% 72% at 50% 22%, #000 0%, transparent 80%); opacity: .5; } a { color: inherit; text-decoration: none; } .sx-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; } /* top bar */ .sx-topbar { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sx-border); position: sticky; top: 0; background: rgba(13,15,20,.82); backdrop-filter: blur(10px); z-index: 20; } .sx-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .2px; font-size: 18px; } .sx-brand .dot { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #6d28d9); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); } .sx-brand b { color: var(--accent); } .sx-spacer { flex: 1; } /* buttons */ .sx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--sx-border); background: var(--sx-surface-2); color: var(--sx-text); font: inherit; font-weight: 600; cursor: pointer; transition: .15s ease; white-space: nowrap; } .sx-btn { transition: transform var(--sx-dur) var(--sx-spring), border-color var(--sx-dur) var(--sx-ease), background var(--sx-dur) var(--sx-ease), filter var(--sx-dur) var(--sx-ease); position: relative; overflow: hidden; } .sx-btn:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--sx-border)); transform: translateY(-1px); } .sx-btn:active { transform: scale(var(--sx-press-scale, .96)); } .sx-btn-primary { background: var(--accent); border-color: transparent; color: var(--sx-accent-ink); } .sx-btn-primary:hover { filter: brightness(1.08); } .sx-btn-ghost { background: transparent; } .sx-btn-sm { padding: 6px 12px; font-size: 13px; } /* cards + chips */ .sx-card { background: var(--surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow); } .sx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--sx-surface-2); border: 1px solid var(--sx-border); color: var(--sx-muted); } .sx-mono { font-family: var(--sx-mono); } .sx-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--sx-border); } /* progress bar */ .sx-meter { height: 8px; border-radius: 999px; background: var(--sx-surface-2); overflow: hidden; } .sx-meter > span { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; } @media (max-width: 640px) { .sx-wrap { padding: 0 14px; } .sx-brand { font-size: 16px; } } /* ---------- premium primitives (used family-wide via core.js) ---------- */ /* click ripple — core.js attaches to .sx-btn and [data-ripple] */ .sx-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.35); pointer-events: none; animation: sx-ripple .55s var(--sx-ease); } @keyframes sx-ripple { to { transform: scale(2.4); opacity: 0; } } /* toast stack */ .sx-toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; align-items: center; pointer-events: none; } .sx-toast { pointer-events: auto; background: var(--sx-surface-2); border: 1px solid var(--sx-border); color: var(--sx-text); padding: 10px 16px; border-radius: 999px; box-shadow: var(--sx-shadow); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; animation: sx-toast-in .3s var(--sx-spring); } .sx-toast.out { animation: sx-toast-out .25s var(--sx-ease) forwards; } .sx-toast .accent { color: var(--accent); } @keyframes sx-toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } } @keyframes sx-toast-out { to { opacity: 0; transform: translateY(8px); } } /* skeleton shimmer — use for loading placeholders instead of blank space */ .sx-skeleton { background: linear-gradient(100deg, var(--sx-surface) 30%, var(--sx-surface-2) 50%, var(--sx-surface) 70%); background-size: 200% 100%; animation: sx-shimmer 1.3s infinite; border-radius: var(--sx-radius-sm); } @keyframes sx-shimmer { to { background-position: -200% 0; } } /* reveal-on-load — core.js adds .in after mount for a soft staggered entrance */ [data-reveal] { opacity: 0; transform: translateY(10px); } [data-reveal].in { opacity: 1; transform: none; transition: opacity var(--sx-dur-lg) var(--sx-ease), transform var(--sx-dur-lg) var(--sx-spring); } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }