/* emit cloud — "Spectral", as the design boards have it (Foundations). emit is an emission
spectrum: a dark ground, thin lines of colour, one sodium accent. Status is never colour alone:
a 3px line and a word. Regions are separated by rules, not boxed in cards; corners are 4px.
Tokens live here; components read them as var(--...) from remix/ui's css() (the rmx layer).
The fonts are linked from the document head, next to their preconnects.
Page rules (@layer app, below) live here too, not in a stylesheet of the page's own: a only
a page's head adds is inserted by a soft navigation in the same commit as the body, and the page
paints unstyled until it loads. This one sheet is in every document's head, loaded once. */
@layer base, rmx, app;
@layer base {
/* Each colour is light-dark(light, dark): the preference picks, and data-theme (the gallery's previews) forces one. */
:root {
color-scheme: light dark;
--bg: light-dark(#f5f3ee, #0b0c0f);
--panel: light-dark(#ffffff, #111318);
--rule: light-dark(#e2dfd7, #20232b);
--rule2: light-dark(#cbc7bd, #2e323c);
--text: light-dark(#15161a, #ece9e2);
--muted: light-dark(#54575e, #9ea1a9);
--faint: light-dark(#686b73, #7e828b);
--accent: light-dark(#9a5600, #ffb454); /* dark: sodium D, 589 nm */
--on-accent: light-dark(#ffffff, #1a1204);
--pending: light-dark(#1f6fcc, #4c9bf0);
--running: light-dark(#a87400, #ffb454);
--completed: light-dark(#0b8f7a, #2fb5a0);
--failed: light-dark(#d1243b, #ff5c64);
--on-failed: light-dark(#ffffff, #1d0d10);
--cancelled: light-dark(#686b73, #8a8f98);
--strip: #07080a; /* the Line's ground: dark in both themes */
--strip-rule: #15171c;
--font-display: 'Funnel Display', 'Funnel Sans', system-ui, sans-serif;
--font-body: 'Funnel Sans', system-ui, sans-serif;
--font-mono: 'Spline Sans Mono', ui-monospace, Menlo, monospace;
--radius: 4px;
--gutter: 32px;
--focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }
@media (max-width: 720px) {
:root {
--gutter: 16px;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
min-height: 100vh;
}
h1, h2 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
}
p {
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: var(--accent);
}
button, input {
font: inherit;
color: inherit;
margin: 0;
}
button {
cursor: pointer;
}
:focus-visible {
outline: none;
box-shadow: var(--focus);
}
/* The Line: the strip is always the dark ground, whatever the theme, and it keeps the dark
spectrum colours (the light theme's darker ones are for ink on a light ground). */
.strip {
--text: #ece9e2;
--muted: #9ea1a9;
--faint: #7e828b;
--rule: #20232b;
--rule2: #2e323c;
--accent: #ffb454;
--pending: #4c9bf0;
--running: #ffb454;
--completed: #2fb5a0;
--failed: #ff5c64;
--cancelled: #8a8f98;
background: var(--strip);
color: var(--text);
}
.line-track {
position: absolute;
inset: 0 auto 0 0;
width: 200%;
animation: line-drift 60s linear infinite;
will-change: transform;
}
.line-track svg {
display: block;
width: 100%;
height: 100%;
}
@keyframes line-drift {
to { transform: translateX(-50%); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes status-text-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.72; }
}
@keyframes emit-button-spin {
to { transform: rotate(360deg); }
}
.pulse {
animation: pulse 1.6s ease-in-out infinite;
}
.status-text-pulse {
animation: status-text-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.line-track {
animation: none;
will-change: auto;
}
.pulse, .status-text-pulse {
animation: none;
opacity: 1;
}
}
}
@layer app {
.button-state-icon {
opacity: 1;
transition: opacity 160ms var(--ease-out);
@starting-style { opacity: 0; }
}
}
/* A sheet: a native modal