/* ==========================================================================
SCAD Render Farm - "Render Studio" design system
Light (white) by default, dark via the header toggle
(data-theme on ); the saved preference is applied before first
paint by the inline snippet in header.inc.php.
No frameworks, no CDNs - everything ships locally with the site.
========================================================================== */
/* ---------- 1. Design tokens ---------- */
/* Light (white) theme - the default. */
:root {
--rf-bg: #f3f5f8;
--rf-surface: #ffffff;
--rf-surface-2: #eaeef3;
--rf-border: #d7dde6;
--rf-text: #1b2330;
--rf-text-dim: #57616f;
--rf-text-faint: #8b95a3;
--rf-ember: #b45309;
--rf-ember-bright: #92400e;
--rf-ember-soft: rgba(180, 83, 9, 0.12);
--rf-cyan: #0e7490;
--rf-green: #0f9d58;
--rf-amber: #b7791f;
--rf-red: #d64545;
--rf-blue: #2563eb;
--rf-glow-ember: none;
--rf-glow-green: none;
--rf-hero-grid: rgba(15, 23, 42, 0.05);
--rf-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
/* Veil over the hero background image: same in both themes, because
the hero band is a dark brand strip in light AND dark mode. It is
a left-to-right gradient - heavier under the text (left/center) and
lightest over the render rack (right) so the photo shows through.
--rf-hero-img is set inline on by the header (its URL
carries the site base prefix). */
--rf-hero-veil: linear-gradient(100deg, rgba(11, 14, 20, 0.85) 0%, rgba(11, 14, 20, 0.4) 60%, rgba(11, 14, 20, 0.55) 100%);
--rf-radius: 10px;
--rf-radius-sm: 6px;
--rf-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
--rf-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Dark theme - selected via the header toggle. */
html[data-theme="dark"] {
--rf-bg: #0b0e14;
--rf-surface: #11151d;
--rf-surface-2: #171d28;
--rf-border: #242c3a;
--rf-text: #e6ebf2;
--rf-text-dim: #98a2b3;
--rf-text-faint: #5f6a7d;
--rf-ember: #f5a524;
--rf-ember-bright: #ffc255;
--rf-ember-soft: rgba(245, 165, 36, 0.13);
--rf-cyan: #4cc3f7;
--rf-green: #3ddc97;
--rf-amber: #f5c518;
--rf-red: #ff6b6b;
--rf-blue: #5b9dff;
--rf-glow-ember: 0 0 8px rgba(245, 165, 36, 0.55);
--rf-glow-green: 0 0 8px rgba(61, 220, 151, 0.5);
--rf-hero-grid: rgba(255, 255, 255, 0.035);
--rf-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--rf-bg);
color: var(--rf-text);
font-family: var(--rf-sans);
font-size: 15px;
line-height: 1.55;
}
a { color: var(--rf-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.6rem; font-weight: 650; }
h2 { font-size: 1.35rem; letter-spacing: 0.01em; }
h3 { font-size: 1.05rem; }
p { margin: 0.4rem 0 0.9rem; }
code, .mono { font-family: var(--rf-mono); font-size: 0.92em; }
.dim { color: var(--rf-text-dim); }
.faint { color: var(--rf-text-faint); }
.small { font-size: 0.85rem; }
.mono { color: var(--rf-text-dim); }
/* ---------- 3. Layout ---------- */
.rf-shell { min-height: 100vh; display: flex; flex-direction: column; }
.container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 0 20px;
}
.rf-main { flex: 1; padding: 28px 0 48px; }
/* Old theme hooks, remapped so page bodies keep working. */
.wrapper { display: contents; }
.bg-white { background: transparent; }
#dedicatedPricing { background: transparent; }
.section-title h2 {
font-size: 1.25rem;
font-weight: 650;
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--rf-border);
}
/* ---------- 4. Top bar ---------- */
.rf-topbar {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--rf-surface) 88%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--rf-border);
}
.rf-topbar .container {
display: flex;
align-items: center;
gap: 22px;
height: 56px;
}
.rf-brand {
display: flex;
align-items: center;
gap: 9px;
font-weight: 750;
letter-spacing: 0.14em;
font-size: 0.82rem;
color: var(--rf-text);
text-transform: uppercase;
white-space: nowrap;
}
.rf-brand:hover { text-decoration: none; }
.rf-brand .rf-brand-led {
width: 9px; height: 9px; border-radius: 50%;
background: var(--rf-ember);
box-shadow: var(--rf-glow-ember);
}
.rf-brand small {
font-weight: 500;
letter-spacing: 0.08em;
color: var(--rf-text-faint);
}
.rf-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.rf-nav li { list-style: none; margin: 0; padding: 0; }
.rf-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; }
.rf-nav a, .rf-nav li a {
display: block;
padding: 6px 12px;
border-radius: var(--rf-radius-sm);
color: var(--rf-text-dim);
font-size: 0.9rem;
font-weight: 550;
}
.rf-nav a:hover { color: var(--rf-text); background: var(--rf-surface-2); text-decoration: none; }
.rf-nav li.active a { color: var(--rf-text); background: var(--rf-ember-soft); }
.rf-nav li.active a { box-shadow: inset 0 0 0 1px var(--rf-ember-soft); }
.rf-top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Hamburger for the mobile nav: hidden on wide screens, shown by
the 900px media query. Three bars fold into an X while the menu
is open (.nav-open on the top bar, toggled by renderfarm.js). */
.rf-nav-toggle {
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4px;
width: 40px;
height: 40px;
border: 1px solid var(--rf-border);
border-radius: var(--rf-radius-sm);
background: var(--rf-surface-2);
cursor: pointer;
flex-shrink: 0;
}
.rf-nav-toggle-bar {
display: block;
width: 18px;
height: 2px;
border-radius: 1px;
background: var(--rf-text);
transition: transform 0.2s ease, opacity 0.2s ease;
}
.rf-topbar.nav-open .rf-nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.rf-topbar.nav-open .rf-nav-toggle-bar:nth-child(2) { opacity: 0; }
.rf-topbar.nav-open .rf-nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.rf-campus {
font-family: var(--rf-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rf-cyan);
border: 1px solid var(--rf-border);
border-radius: 999px;
padding: 3px 10px;
background: var(--rf-surface-2);
}
.rf-user {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--rf-mono);
font-size: 0.82rem;
color: var(--rf-text);
background: var(--rf-surface-2);
border: 1px solid var(--rf-border);
border-radius: 999px;
padding: 4px 12px 4px 8px;
}
.rf-user .rf-user-led {
width: 8px; height: 8px; border-radius: 50%;
background: var(--rf-green);
box-shadow: var(--rf-glow-green);
}
.rf-user .rf-role {
font-family: var(--rf-sans);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rf-ember);
border-left: 1px solid var(--rf-border);
padding-left: 8px;
}
/* Theme toggle: a tiny two-state LED switch */
.rf-theme {
appearance: none;
border: 1px solid var(--rf-border);
background: var(--rf-surface-2);
color: var(--rf-text-dim);
border-radius: 999px;
width: 40px; height: 24px;
position: relative;
cursor: pointer;
padding: 0;
}
.rf-theme::after {
content: "";
position: absolute;
top: 3px; left: 4px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--rf-ember);
box-shadow: var(--rf-glow-ember);
transition: transform 0.18s ease;
}
html[data-theme="dark"] .rf-theme::after { transform: translateX(15px); }
.rf-theme:hover { border-color: var(--rf-ember); }
/* ---------- 5. Page hero band ---------- */
.rf-hero {
border-bottom: 1px solid var(--rf-border);
background-color: var(--rf-surface);
background-image:
linear-gradient(var(--rf-hero-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--rf-hero-grid) 1px, transparent 1px),
var(--rf-hero-veil, none),
var(--rf-hero-img, none);
background-size: 28px 28px, 28px 28px, auto, cover;
background-position: center;
box-shadow: inset 0 1px 0 var(--rf-ember-soft);
}
.rf-hero .container { padding: 22px 20px 20px; }
/* The hero band sits on the dark-veiled photo in both themes, so its
text is always light (the ember LED is the bright variant too). */
.rf-hero h1 {
font-size: 1.5rem;
margin: 0;
letter-spacing: 0.02em;
color: #fff;
}
.rf-hero h1::before {
content: "";
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
background: #f5a524;
box-shadow: 0 0 8px rgba(245, 165, 36, 0.55);
margin-right: 12px;
vertical-align: 2px;
}
.rf-hero .rf-hero-sub {
color: rgba(255, 255, 255, 0.78);
margin: 6px 0 0;
font-size: 0.92rem;
}
/* ---------- 6. Cards, panels ---------- */
.rf-card {
background: var(--rf-surface);
border: 1px solid var(--rf-border);
border-radius: var(--rf-radius);
padding: 20px 22px;
margin-bottom: 20px;
}
.rf-card h3 { margin-top: 0; }
/* ---------- 7. Tables ---------- */
table.rf-table, table {
width: 100%;
border-collapse: collapse;
background: var(--rf-surface);
border: 1px solid var(--rf-border);
border-radius: var(--rf-radius);
overflow: hidden;
font-size: 0.92rem;
}
/* Header styling: real rows, or - for legacy tables without
* one - the first row only when it sits DIRECTLY in the table. The
* direct-child combinator matters: tr:first-child alone would also
* match the first row inside a and style data like a header.
*/
thead th,
table > tr:first-child th,
table > tr:first-child td,
table > tr > td > b, table > tr > td > strong {
font-size: 0.74rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rf-text-faint);
font-weight: 650;
}
tbody td, table td {
padding: 9px 12px;
border-bottom: 1px solid var(--rf-border);
vertical-align: top;
}
tbody tr:last-child td, table tr:last-child td { border-bottom: none; }
tbody tr:hover td, table tr:hover td { background: var(--rf-surface-2); }
td.num, th.num, td.right, th.right { text-align: right; font-family: var(--rf-mono); }
td.mono, th.mono { font-family: var(--rf-mono); font-size: 0.88em; }
/* Forms inside tables (admin page) */
table input[type="text"], table select {
font-size: 0.85rem;
padding: 4px 8px;
min-width: 70px;
}
/* ---------- 8. Status pills and LEDs ---------- */
.led {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--rf-text-faint);
vertical-align: 1px;
margin-right: 7px;
}
.led-green { background: var(--rf-green); box-shadow: var(--rf-glow-green); }
.led-amber { background: var(--rf-amber); box-shadow: var(--rf-glow-ember); }
.led-red { background: var(--rf-red); }
.led-cyan { background: var(--rf-cyan); }
.led-off { background: var(--rf-text-faint); box-shadow: none; }
.pill {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--rf-mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid var(--rf-border);
border-radius: 999px;
padding: 3px 11px 3px 9px;
background: var(--rf-surface-2);
color: var(--rf-text-dim);
}
.pill .led { margin-right: 0; }
.pill-green { color: var(--rf-green); border-color: color-mix(in srgb, var(--rf-green) 40%, var(--rf-border)); }
.pill-amber { color: var(--rf-amber); border-color: color-mix(in srgb, var(--rf-amber) 40%, var(--rf-border)); }
.pill-red { color: var(--rf-red); border-color: color-mix(in srgb, var(--rf-red) 40%, var(--rf-border)); }
.pill-cyan { color: var(--rf-cyan); border-color: color-mix(in srgb, var(--rf-cyan) 40%, var(--rf-border)); }
/* Node wall status: class is built from the DB status string */
.st-idle .led { background: var(--rf-green); box-shadow: var(--rf-glow-green); }
.st-rendering .led { background: var(--rf-amber); box-shadow: var(--rf-glow-ember); }
.st-error .led, .st-failed .led { background: var(--rf-red); }
.st-queued .led, .st-waiting .led { background: var(--rf-cyan); }
/* Product check dots (replace the old add/delete checkmarks) */
.dot {
display: inline-block;
width: 9px; height: 9px;
border-radius: 3px;
background: var(--rf-text-faint);
opacity: 0.35;
}
.dot.on { background: var(--rf-green); opacity: 1; box-shadow: var(--rf-glow-green); }
/* ---------- 9. Buttons and forms ---------- */
.btn {
display: inline-block;
padding: 9px 20px;
border-radius: var(--rf-radius-sm);
border: 1px solid var(--rf-border);
background: var(--rf-surface-2);
color: var(--rf-text);
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
.btn:hover { border-color: var(--rf-ember); color: var(--rf-ember-bright); text-decoration: none; }
.btn-ember {
background: var(--rf-ember);
border-color: var(--rf-ember);
color: #14100a;
font-weight: 700;
}
.btn-ember:hover { background: var(--rf-ember-bright); color: #14100a; }
html[data-theme="dark"] .btn-ember:hover { color: #fff; }
/* Ember emphasis text: the button orange for in-prose highlights
(replaces the legacy red emphasis). */
.text-ember { color: var(--rf-ember); }
/* Proxy-as badge (role testing via ?proxyas= or the sticky
rf_proxyas cookie, admin only). The X stops the proxy. */
.rf-proxy-stop {
margin-left: 7px;
font-weight: 700;
color: inherit;
text-decoration: none;
}
.rf-proxy-stop:hover {
text-decoration: none;
opacity: 0.65;
}
/* Admin page: clear breathing room between the settings, role
testing, user permissions and whitelist sections. */
.rf-admin-sections h3 {
margin: 2.4rem 0 0.9rem;
}
/* Admin console tabs: the sections are split into tabbed panels so
the page stays scannable. The bar wraps on narrow screens (short
labels) and every panel lives in the DOM (forms keep working
regardless of which tab is visible). */
.rf-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
border-bottom: 1px solid var(--rf-border);
margin: 1.4rem 0 0;
padding: 0;
}
.rf-tab {
appearance: none;
background: transparent;
border: 1px solid transparent;
border-bottom: none;
border-radius: var(--rf-radius) var(--rf-radius) 0 0;
color: var(--rf-text-dim);
font: inherit;
font-size: 0.9rem;
padding: 0.5rem 0.9rem 0.45rem;
cursor: pointer;
}
.rf-tab:hover { color: var(--rf-text); }
.rf-tab[aria-selected="true"] {
color: var(--rf-ember);
background: var(--rf-surface);
border-color: var(--rf-border);
margin-bottom: -1px;
}
.rf-tab-panel { padding-top: 1.1rem; }
.rf-tab-panel[hidden] { display: none; }
/* Admin stats: the scope selector (Savannah / Atlanta / Combined)
is a row of buttons that swaps the embedded ledgers client-side
(no page reload). */
.rf-stats-scope { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.rf-scope-btn {
appearance: none;
background: transparent;
border: 1px solid var(--rf-border);
border-radius: var(--rf-radius);
color: var(--rf-text-dim);
font: inherit;
font-size: 0.85rem;
padding: 0.3rem 0.8rem;
cursor: pointer;
}
.rf-scope-btn:hover { color: var(--rf-ember); }
.rf-scope-btn[aria-pressed="true"] { color: var(--rf-ember); background: var(--rf-surface); }
#rf-stats-unreachable { color: var(--rf-ember-soft); margin: 6px 0; }
/* Admin stats: chart cards side by side on wide screens, stacked on
phones (the SVG scales with its container, so nothing overflows).
SVG fills/strokes go through classes so both themes recolor them. */
.rf-stats-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 1rem 0;
}
@media (max-width: 760px) {
.rf-stats-grid { grid-template-columns: 1fr; }
}
.rf-stat-card {
border: 1px solid var(--rf-border);
border-radius: var(--rf-radius);
background: var(--rf-surface);
padding: 10px 12px;
}
.rf-stat-card h4 {
margin: 0 0 4px;
font-size: 0.95rem;
}
.rf-stat-card p {
margin: 0;
font-size: 0.8rem;
color: var(--rf-text-dim);
}
.rf-chart { width: 100%; height: auto; display: block; }
.rf-chart-gridline { stroke: var(--rf-border); stroke-dasharray: 3 4; }
.rf-chart-baseline { stroke: var(--rf-border); }
.rf-chart-bar { fill: var(--rf-cyan); cursor: pointer; }
.rf-chart-bar:hover { fill: var(--rf-ember-soft); }
.rf-chart-bar[aria-pressed="true"] { fill: var(--rf-ember); }
.rf-chart-line { fill: none; stroke: var(--rf-ember); stroke-width: 2; }
.rf-chart-area { fill: var(--rf-ember); opacity: 0.14; }
.rf-chart-dot { fill: var(--rf-ember); cursor: pointer; }
.rf-chart-label { fill: var(--rf-text-dim); font-size: 10px; }
.rf-chart-value { fill: var(--rf-text-dim); font-size: 10px; }
/* Health metrics: a two-column definition list that wraps on phones. */
.rf-stats-health {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 18px;
margin: 0.6rem 0;
padding: 0;
}
@media (max-width: 760px) {
.rf-stats-health { grid-template-columns: 1fr; }
}
.rf-stats-health div {
border-bottom: 1px solid var(--rf-border);
padding: 6px 0;
font-size: 0.9rem;
}
.rf-stats-health dt { color: var(--rf-text-dim); font-size: 0.8rem; }
.rf-stats-health dd { margin: 2px 0 0; }
/* Drill-down panel: appears under the charts when a day is clicked. */
#rf-stats-drill {
border: 1px solid var(--rf-ember);
border-radius: var(--rf-radius);
background: var(--rf-surface);
padding: 10px 14px;
margin: 10px 0 18px;
}
#rf-stats-drill[hidden] { display: none; }
#rf-stats-drill h4 { margin: 0 0 6px; color: var(--rf-ember); }
#rf-stats-drill table { width: 100%; border-collapse: collapse; }
#rf-stats-drill td { padding: 3px 8px 3px 0; font-size: 0.9rem; }
#rf-stats-drill td:first-child { color: var(--rf-text-dim); }
/* Hero: keep "Frames rendered." on one line; the *1 reference is a
small superscript pointing at the footnote under the CTA. */
.rf-nowrap { white-space: nowrap; }
/* Small superscript footnote references (*1, *2) in the hero and the
renderer heading. */
.rf-h1-note,
.rf-h2-note {
font-size: 0.55em;
vertical-align: super;
line-height: 0;
color: var(--rf-text-dim);
}
/* The *1 / *2 references are links down to the footnotes; they must
not look like navigation links - no underline, note color. */
.rf-fn-link {
color: inherit;
text-decoration: none;
}
.rf-fn-link:hover {
text-decoration: none;
opacity: 0.7;
}
/* Footnotes under the CTA: left-aligned with the page content. The
trademark line is ~1225px wide, wider than the content box
(1140px), so it must be allowed to wrap: with white-space:nowrap it
overflowed the page (15px on a 1280 desktop, 855px on a 390px
phone). The shorter first footnote still sits on one line. */
.rf-hero-footnote {
margin: 6px 0 0;
font-size: 0.78rem;
line-height: 1.6;
color: var(--rf-text-dim);
text-align: left;
}
.rf-proxy-badge {
font-family: var(--rf-mono);
font-size: 0.72rem;
letter-spacing: 0.05em;
color: var(--rf-ember);
background: var(--rf-ember-soft);
border: 1px solid color-mix(in srgb, var(--rf-ember) 40%, var(--rf-border));
border-radius: 999px;
padding: 3px 10px;
white-space: nowrap;
}
input[type="text"], input[type="password"], input[type="number"],
select, textarea {
background: var(--rf-surface);
border: 1px solid var(--rf-border);
border-radius: var(--rf-radius-sm);
color: var(--rf-text);
padding: 8px 12px;
font-size: 0.92rem;
font-family: inherit;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--rf-ember);
box-shadow: 0 0 0 3px var(--rf-ember-soft);
}
/* Bare submit buttons (wizard, admin, legacy forms) */
input[type="submit"], input[type="button"] {
background: var(--rf-ember);
border: 1px solid var(--rf-ember);
color: #14100a;
font-weight: 700;
padding: 7px 18px;
border-radius: var(--rf-radius-sm);
cursor: pointer;
font-size: 0.9rem;
font-family: inherit;
}
input[type="submit"]:hover { background: var(--rf-ember-bright); }
label { font-size: 0.88rem; color: var(--rf-text-dim); display: block; margin-bottom: 4px; }
.field { margin-bottom: 14px; }
fieldset {
border: 1px solid var(--rf-border);
border-radius: var(--rf-radius);
padding: 18px 20px;
margin: 0 0 20px;
background: var(--rf-surface);
}
legend {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rf-ember);
padding: 0 8px;
}
/* ---------- 10. Landing ---------- */
.rf-landing-hero {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--rf-border);
background-color: var(--rf-surface);
background-image:
radial-gradient(1000px 420px at 78% -10%, var(--rf-ember-soft), transparent 60%),
linear-gradient(var(--rf-hero-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--rf-hero-grid) 1px, transparent 1px),
var(--rf-hero-veil, none),
var(--rf-hero-img, none);
background-size: auto, 30px 30px, 30px 30px, auto, cover;
background-position: center;
}
.rf-landing-hero .container { padding: 72px 20px 60px; position: relative; }
.rf-landing-hero h1 {
font-size: clamp(2rem, 4.6vw, 3.2rem);
max-width: 15ch;
letter-spacing: 0.01em;
color: #fff;
}
.rf-landing-hero h1 em {
font-style: normal;
color: #f5a524;
text-shadow: 0 0 10px rgba(245, 165, 36, 0.5);
}
.rf-landing-hero p {
max-width: 52ch;
color: rgba(255, 255, 255, 0.8);
font-size: 1.05rem;
margin: 18px 0 30px;
}
.rf-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* The node rack: a strip of LEDs that blink with staggered delays */
.rf-rack {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 42px 0 0;
padding: 16px 18px;
background: var(--rf-bg);
border: 1px solid var(--rf-border);
border-radius: var(--rf-radius);
max-width: 640px;
align-items: center;
}
.rf-rack .rack-led {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--rf-green);
opacity: 0.9;
animation: rf-blink 2.6s infinite;
animation-delay: calc(var(--i) * 0.17s);
}
.rf-rack .rack-led.ember { background: var(--rf-amber); box-shadow: var(--rf-glow-ember); }
.rf-rack .rack-led.off { background: var(--rf-text-faint); opacity: 0.4; animation: none; }
.rf-rack .rack-label {
margin-left: auto;
font-family: var(--rf-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rf-text-faint);
}
@keyframes rf-blink {
0%, 100% { opacity: 0.9; }
50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
.rf-rack .rack-led { animation: none; }
}
/* Feature cards */
.rf-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 18px;
margin: 26px 0;
}
.rf-feature {
background: var(--rf-surface);
border: 1px solid var(--rf-border);
border-radius: var(--rf-radius);
padding: 22px;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.rf-feature:hover { border-color: var(--rf-ember); transform: translateY(-2px); }
/* Feature cards that link somewhere: block-level, and they look like
buttons rather than text links. */
.rf-feature-link { display: block; color: inherit; text-decoration: none; }
/* The global a:hover underline outranks the class rule above; keep the
card's text clean on hover - the card border highlight is the cue. */
.rf-feature-link:hover { text-decoration: none; }
.rf-feature-link:hover h3 { color: var(--rf-ember); }
.rf-feature h3 {
font-size: 1rem;
margin: 10px 0 6px;
}
.rf-feature p { color: var(--rf-text-dim); font-size: 0.9rem; margin: 0; }
.rf-feature .rf-feature-ico {
font-size: 1.5rem;
width: 46px; height: 46px;
display: flex; align-items: center; justify-content: center;
background: var(--rf-ember-soft);
border: 1px solid var(--rf-ember-soft);
border-radius: var(--rf-radius-sm);
}
/* Renderer logo grid */
.rf-renderers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin: 22px 0 30px;
}
.rf-renderer {
background: var(--rf-surface);
border: 1px solid var(--rf-border);
border-radius: var(--rf-radius);
padding: 26px 16px;
text-align: center;
}
/* Every logo sits in the same 84px-tall box, so the wordmark labels
below line up on one baseline across the row. Logos whose aspect
ratio is wider than the card are contain-scaled and pinned to the
box bottom, keeping a constant gap to their label whatever the
transparent padding inside the image file. */
.rf-renderer img {
max-width: 100%;
height: 84px;
object-fit: contain;
object-position: center bottom;
}
/* Logos whose wordmark is dark ship in two variants: the light-text
one shows only in dark mode, the dark-text one only in light mode,
because black type disappears on the dark card. Houdini is fully
monochrome black, so its light variant is the whole artwork in
white. Single-variant logos (colored wordmarks: Blender, V-Ray)
carry no class and always show. */
.rf-renderer .rf-logo-light { display: none; }
html[data-theme="dark"] .rf-renderer .rf-logo-dark { display: none; }
html[data-theme="dark"] .rf-renderer .rf-logo-light { display: inline; }
.rf-renderer span {
display: block;
margin-top: 12px;
font-family: var(--rf-mono);
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rf-text-faint);
}
/* Stats strip */
.rf-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
margin: 30px 0 10px;
}
.rf-stat {
border: 1px solid var(--rf-border);
border-radius: var(--rf-radius);
background: var(--rf-surface);
padding: 16px 18px;
}
.rf-stat b {
display: block;
font-family: var(--rf-mono);
font-size: 1.5rem;
color: var(--rf-ember);
text-shadow: var(--rf-glow-ember);
}
.rf-stat span { font-size: 0.8rem; color: var(--rf-text-dim); letter-spacing: 0.06em; }
/* Landing page: the stats strip sits at the very top of the content. */
.rf-landing-stats { margin: 8px 0 34px; }
/* Two submit buttons side by side in the admin permissions table:
keep them from sticking together. */
.rf-row-btn + .rf-row-btn {
margin-left: 8px;
}
/* Stat card that links somewhere (the NODES card jumps to the node
wall). The whole card is the link. */
.rf-stat-link a {
display: block;
color: inherit;
text-decoration: none;
}
.rf-stat-link:hover {
border-color: var(--rf-ember);
}
/* ---------- 11. Node wall ---------- */
.rf-nodes-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rf-nodes-title h2 { margin: 0; }
.rf-nodes-title .rf-nodes-count {
font-family: var(--rf-mono);
font-size: 1rem;
color: var(--rf-ember);
}
/* A table that can outgrow a narrow viewport scrolls inside its own
frame instead of stretching the whole page (node wall, dashboard
jobs table). */
.rf-node-table-wrap, .rf-table-wrap { overflow-x: auto; border-radius: var(--rf-radius); }
/* Dashboard jobs table status cell: the state (icon + text) and, for
running jobs, the red X delete control share one cell. */
.rf-status-cell {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.rf-status-cell .progress { flex: 1; min-width: 0; }
.rf-ic { flex-shrink: 0; }
/* Mobile-only status icon: hidden on desktop (the Action column and
the status text are the desktop controls). The display comes only
from the mobile media rule below, so this base hide cannot be
out-ranked by the icon classes. */
.rf-mobile-ic { display: none; }
.rf-ic-done { color: var(--rf-green); }
.rf-ic-del {
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
flex-shrink: 0;
border: 1px solid var(--rf-border);
border-radius: 6px;
background: var(--rf-surface-2);
color: var(--rf-red);
cursor: pointer;
}
.rf-ic-del:hover { background: rgba(214, 69, 69, 0.14); border-color: var(--rf-red); }
/* Frame Range input when the frame-error banner is showing: ember
border plus a soft ember wash, matching the note above. An outline
(not a thicker border) keeps the layout from shifting. */
input.rf-input-error {
border-color: var(--rf-ember);
background: var(--rf-ember-soft);
outline: 2px solid var(--rf-ember);
outline-offset: 2px;
}
/* Action-feedback note: the job status page's re-render result
(success or refusal) and the submit wizard's validation messages.
One style for both, so the site speaks with one voice. */
.rf-rr-note,
.rf-wiz-error {
background: var(--rf-surface);
border: 1px solid var(--rf-border);
border-left: 4px solid var(--rf-ember);
border-radius: var(--rf-radius);
padding: 12px 16px;
margin-bottom: 20px;
font-weight: 600;
color: var(--rf-ember);
white-space: pre-line; /* the "too old" message carries a newline */
}
/* Wizard iframe on the submit page: fluid width, height fitted to the
content by inc/renderfarm.js (same-origin). */
.rf-wiz-frame {
display: block;
width: 100%;
height: 640px;
border: 0;
}
/* Wizard file picker: a