ilia
c08a3e482b
- AutoBank branding, phosphor-green terminal aesthetic - Five normalized logo frames that advance on scroll - Logo build scripts and design exploration docs under docs/
2372 lines
67 KiB
HTML
2372 lines
67 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Visual style directions</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&family=Instrument+Serif:ital@0;1&family=Syne:wght@600;700&family=JetBrains+Mono:wght@400;500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Outfit:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style>
|
||
:root {
|
||
--page-bg: #0a0c10;
|
||
--page-ink: #eef0f4;
|
||
--page-muted: #8a919e;
|
||
--page-line: #222830;
|
||
--page-accent: #6ee7b7;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: "DM Sans", system-ui, sans-serif;
|
||
background: var(--page-bg);
|
||
color: var(--page-ink);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.wrap {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 48px 24px 80px;
|
||
}
|
||
|
||
.eyebrow {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 12px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--page-accent);
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: clamp(28px, 4vw, 40px);
|
||
font-weight: 700;
|
||
letter-spacing: -0.03em;
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
.lede {
|
||
max-width: 65ch;
|
||
color: var(--page-muted);
|
||
margin: 0 0 24px;
|
||
font-size: 17px;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 28px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid var(--page-line);
|
||
}
|
||
|
||
.pick-label {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 13px;
|
||
color: var(--page-muted);
|
||
}
|
||
|
||
.pick-value {
|
||
color: var(--page-accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.btn {
|
||
font: inherit;
|
||
cursor: pointer;
|
||
border: 1px solid var(--page-line);
|
||
background: #12151c;
|
||
color: var(--page-ink);
|
||
padding: 8px 14px;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.btn:hover {
|
||
border-color: var(--page-accent);
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
|
||
.style-card {
|
||
border: 2px solid var(--page-line);
|
||
border-radius: 18px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
background: #12151c;
|
||
transition: border-color 0.2s, transform 0.15s;
|
||
text-align: left;
|
||
}
|
||
|
||
.style-card:hover {
|
||
transform: translateY(-2px);
|
||
border-color: #3a4254;
|
||
}
|
||
|
||
.style-card.is-picked {
|
||
border-color: var(--page-accent);
|
||
box-shadow: 0 0 0 1px var(--page-accent);
|
||
}
|
||
|
||
.preview {
|
||
min-height: 220px;
|
||
padding: 20px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.meta {
|
||
padding: 16px 18px 20px;
|
||
border-top: 1px solid var(--page-line);
|
||
}
|
||
|
||
.meta-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
gap: 12px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.meta-head h2 {
|
||
font-size: 17px;
|
||
margin: 0;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.meta-num {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 11px;
|
||
color: var(--page-muted);
|
||
}
|
||
|
||
.meta-desc {
|
||
font-size: 13px;
|
||
color: var(--page-muted);
|
||
margin: 0 0 10px;
|
||
}
|
||
|
||
.tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
|
||
.tags span {
|
||
font-size: 10px;
|
||
font-family: "IBM Plex Mono", monospace;
|
||
padding: 3px 7px;
|
||
border-radius: 999px;
|
||
background: #1a1f28;
|
||
border: 1px solid var(--page-line);
|
||
color: var(--page-muted);
|
||
}
|
||
|
||
/* Shared preview components */
|
||
.mini-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.mini-nav {
|
||
display: flex;
|
||
gap: 10px;
|
||
font-size: 10px;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.mini-hero h3 {
|
||
font-size: clamp(16px, 2.5vw, 20px);
|
||
line-height: 1.15;
|
||
margin: 0 0 8px;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.mini-hero p {
|
||
font-size: 11px;
|
||
margin: 0 0 12px;
|
||
opacity: 0.75;
|
||
max-width: 28ch;
|
||
}
|
||
|
||
.mini-btn {
|
||
display: inline-block;
|
||
font-size: 10px;
|
||
padding: 6px 12px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.mini-terminal {
|
||
margin-top: 14px;
|
||
border-radius: 8px;
|
||
padding: 8px 10px;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 9px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.mini-flow {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
margin-top: 12px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.mini-flow .node {
|
||
width: 28px;
|
||
height: 22px;
|
||
border-radius: 6px;
|
||
border: 1.5px solid currentColor;
|
||
opacity: 0.5;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.mini-flow .node.on {
|
||
opacity: 1;
|
||
box-shadow: 0 0 12px currentColor;
|
||
}
|
||
|
||
.mini-flow .wire {
|
||
flex: 1;
|
||
height: 2px;
|
||
min-width: 12px;
|
||
background: currentColor;
|
||
opacity: 0.35;
|
||
position: relative;
|
||
}
|
||
|
||
.mini-flow .wire::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: -1px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
border: 4px solid transparent;
|
||
border-left-color: currentColor;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.batch-label {
|
||
grid-column: 1 / -1;
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 11px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--page-muted);
|
||
margin: 8px 0 0;
|
||
padding-top: 20px;
|
||
border-top: 1px solid var(--page-line);
|
||
}
|
||
|
||
.batch-label:first-of-type {
|
||
border-top: none;
|
||
padding-top: 0;
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* 1 — Current: Terminal Neon */
|
||
.s-terminal-neon {
|
||
background: #0a0e1a;
|
||
color: #eef2ff;
|
||
}
|
||
.s-terminal-neon .mini-header {
|
||
color: #00e5a8;
|
||
font-family: "Space Grotesk", sans-serif;
|
||
}
|
||
.s-terminal-neon .mini-hero h3 {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
}
|
||
.s-terminal-neon .mini-btn {
|
||
background: #00e5a8;
|
||
color: #0a0e1a;
|
||
}
|
||
.s-terminal-neon .mini-terminal {
|
||
background: #0f1424;
|
||
border: 1px solid #28304f;
|
||
color: #7e89a8;
|
||
}
|
||
.s-terminal-neon .mini-terminal .ok {
|
||
color: #00e5a8;
|
||
}
|
||
.s-terminal-neon::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(circle at 80% 20%, rgba(0, 229, 168, 0.12), transparent 50%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 2 — Light Editorial */
|
||
.s-light-editorial {
|
||
background: #faf9f6;
|
||
color: #1a1a1a;
|
||
}
|
||
.s-light-editorial .mini-header {
|
||
font-family: "Libre Baskerville", serif;
|
||
color: #1a1a1a;
|
||
}
|
||
.s-light-editorial .mini-hero h3 {
|
||
font-family: "Instrument Serif", serif;
|
||
font-size: 22px;
|
||
font-weight: 400;
|
||
}
|
||
.s-light-editorial .mini-btn {
|
||
background: #1a1a1a;
|
||
color: #faf9f6;
|
||
border-radius: 2px;
|
||
}
|
||
.s-light-editorial .mini-terminal {
|
||
background: #f0eeea;
|
||
border: 1px solid #ddd8d0;
|
||
color: #666;
|
||
font-family: "IBM Plex Mono", monospace;
|
||
}
|
||
|
||
/* 3 — Swiss Minimal */
|
||
.s-swiss {
|
||
background: #fff;
|
||
color: #000;
|
||
}
|
||
.s-swiss .mini-header {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 700;
|
||
letter-spacing: -0.04em;
|
||
text-transform: uppercase;
|
||
font-size: 11px;
|
||
}
|
||
.s-swiss .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
.s-swiss .mini-btn {
|
||
background: #000;
|
||
color: #fff;
|
||
border-radius: 0;
|
||
}
|
||
.s-swiss .mini-terminal {
|
||
background: #f5f5f5;
|
||
border-left: 3px solid #000;
|
||
border-radius: 0;
|
||
color: #333;
|
||
}
|
||
|
||
/* 4 — Warm Studio */
|
||
.s-warm {
|
||
background: linear-gradient(160deg, #faf6f1 0%, #f3ebe3 100%);
|
||
color: #2c2419;
|
||
}
|
||
.s-warm .mini-header {
|
||
font-family: "Outfit", sans-serif;
|
||
color: #c45c3e;
|
||
}
|
||
.s-warm .mini-hero h3 {
|
||
font-family: "Outfit", sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
.s-warm .mini-btn {
|
||
background: #c45c3e;
|
||
color: #fff;
|
||
border-radius: 999px;
|
||
}
|
||
.s-warm .mini-terminal {
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border: 1px solid #e8ddd3;
|
||
color: #6b5d4f;
|
||
}
|
||
|
||
/* 5 — Blueprint */
|
||
.s-blueprint {
|
||
background: #0d1b2a;
|
||
color: #e0eaff;
|
||
background-image: linear-gradient(rgba(100, 149, 237, 0.08) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(100, 149, 237, 0.08) 1px, transparent 1px);
|
||
background-size: 16px 16px;
|
||
}
|
||
.s-blueprint .mini-header {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
color: #6495ed;
|
||
}
|
||
.s-blueprint .mini-hero h3 {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-weight: 500;
|
||
}
|
||
.s-blueprint .mini-btn {
|
||
background: transparent;
|
||
color: #6495ed;
|
||
border: 1px solid #6495ed;
|
||
}
|
||
.s-blueprint .mini-terminal {
|
||
background: rgba(13, 27, 42, 0.8);
|
||
border: 1px dashed #6495ed;
|
||
color: #8faadc;
|
||
}
|
||
|
||
/* 6 — Brutalist Mono */
|
||
.s-brutalist {
|
||
background: #e8e8e8;
|
||
color: #111;
|
||
}
|
||
.s-brutalist .mini-header {
|
||
font-family: "JetBrains Mono", monospace;
|
||
background: #111;
|
||
color: #e8e8e8;
|
||
padding: 4px 8px;
|
||
display: inline-block;
|
||
}
|
||
.s-brutalist .mini-hero h3 {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
font-size: 15px;
|
||
}
|
||
.s-brutalist .mini-btn {
|
||
background: #ff3300;
|
||
color: #fff;
|
||
border-radius: 0;
|
||
box-shadow: 4px 4px 0 #111;
|
||
}
|
||
.s-brutalist .mini-terminal {
|
||
background: #111;
|
||
color: #0f0;
|
||
border: 3px solid #111;
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* 7 — Soft SaaS */
|
||
.s-soft-saas {
|
||
background: linear-gradient(135deg, #1a1033 0%, #2d1b4e 100%);
|
||
color: #f0eaff;
|
||
}
|
||
.s-soft-saas .mini-header {
|
||
font-family: "Outfit", sans-serif;
|
||
color: #c4b5fd;
|
||
}
|
||
.s-soft-saas .mini-hero h3 {
|
||
font-family: "Outfit", sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
.s-soft-saas .mini-btn {
|
||
background: linear-gradient(135deg, #8b5cf6, #ec4899);
|
||
color: #fff;
|
||
border-radius: 10px;
|
||
}
|
||
.s-soft-saas .mini-terminal {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid rgba(196, 181, 253, 0.2);
|
||
color: #c4b5fd;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.s-soft-saas::before {
|
||
content: "";
|
||
position: absolute;
|
||
width: 120px;
|
||
height: 120px;
|
||
background: radial-gradient(circle, rgba(139, 92, 246, 0.4), transparent 70%);
|
||
top: -20px;
|
||
right: -20px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 8 — Industrial */
|
||
.s-industrial {
|
||
background: #1c1c1e;
|
||
color: #d1d1d6;
|
||
}
|
||
.s-industrial .mini-header {
|
||
font-family: "Syne", sans-serif;
|
||
color: #ff9500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
font-size: 11px;
|
||
}
|
||
.s-industrial .mini-hero h3 {
|
||
font-family: "Syne", sans-serif;
|
||
font-weight: 700;
|
||
}
|
||
.s-industrial .mini-btn {
|
||
background: #ff9500;
|
||
color: #1c1c1e;
|
||
border-radius: 4px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
font-size: 9px;
|
||
}
|
||
.s-industrial .mini-terminal {
|
||
background: #2c2c2e;
|
||
border-left: 4px solid #ff9500;
|
||
color: #8e8e93;
|
||
}
|
||
|
||
/* 9 — Paper & Ink */
|
||
.s-paper {
|
||
background: #f4f1ea;
|
||
color: #1e3a5f;
|
||
}
|
||
.s-paper .mini-header {
|
||
font-family: "Libre Baskerville", serif;
|
||
color: #1e3a5f;
|
||
}
|
||
.s-paper .mini-hero h3 {
|
||
font-family: "Libre Baskerville", serif;
|
||
font-weight: 700;
|
||
}
|
||
.s-paper .mini-btn {
|
||
background: #1e3a5f;
|
||
color: #f4f1ea;
|
||
border-radius: 4px;
|
||
}
|
||
.s-paper .mini-terminal {
|
||
background: #fff;
|
||
border: 1px solid #c9c0b0;
|
||
color: #4a6785;
|
||
box-shadow: 2px 2px 0 #c9c0b0;
|
||
}
|
||
|
||
/* 10 — Monochrome Luxe */
|
||
.s-luxe {
|
||
background: #0a0a0a;
|
||
color: #f5f5f5;
|
||
}
|
||
.s-luxe .mini-header {
|
||
font-family: "Instrument Serif", serif;
|
||
font-style: italic;
|
||
color: #c9a962;
|
||
font-size: 15px;
|
||
}
|
||
.s-luxe .mini-hero h3 {
|
||
font-family: "Instrument Serif", serif;
|
||
font-weight: 400;
|
||
font-size: 22px;
|
||
}
|
||
.s-luxe .mini-btn {
|
||
background: transparent;
|
||
color: #c9a962;
|
||
border: 1px solid #c9a962;
|
||
border-radius: 2px;
|
||
}
|
||
.s-luxe .mini-terminal {
|
||
background: transparent;
|
||
border: 1px solid #333;
|
||
color: #888;
|
||
font-family: "IBM Plex Mono", monospace;
|
||
}
|
||
.s-luxe::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, #c9a962, transparent);
|
||
}
|
||
|
||
/* 11 — n8n Canvas */
|
||
.s-n8n {
|
||
background: #1a1a24;
|
||
color: #e8e8ed;
|
||
}
|
||
.s-n8n .mini-header {
|
||
font-family: "Inter", sans-serif;
|
||
color: #ff6d5a;
|
||
}
|
||
.s-n8n .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
.s-n8n .mini-btn {
|
||
background: #ff6d5a;
|
||
color: #fff;
|
||
border-radius: 8px;
|
||
}
|
||
.s-n8n .mini-terminal {
|
||
background: #252530;
|
||
border: 1px solid #3a3a48;
|
||
color: #9b9bab;
|
||
}
|
||
.s-n8n .mini-terminal .ok {
|
||
color: #ff6d5a;
|
||
}
|
||
.s-n8n .mini-flow {
|
||
color: #ff6d5a;
|
||
}
|
||
.s-n8n .mini-flow .node {
|
||
border-radius: 10px;
|
||
background: #252530;
|
||
}
|
||
.s-n8n::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: radial-gradient(circle at 20% 80%, rgba(255, 109, 90, 0.08), transparent 40%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 12 — Relay Handoff */
|
||
.s-relay {
|
||
background: linear-gradient(180deg, #0f1419 0%, #151b24 100%);
|
||
color: #e8ecf4;
|
||
}
|
||
.s-relay .mini-header {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 600;
|
||
color: #60a5fa;
|
||
}
|
||
.s-relay .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 600;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
.s-relay .mini-btn {
|
||
background: #60a5fa;
|
||
color: #0f1419;
|
||
border-radius: 8px;
|
||
}
|
||
.s-relay .mini-terminal {
|
||
background: rgba(96, 165, 250, 0.06);
|
||
border: 1px solid rgba(96, 165, 250, 0.25);
|
||
color: #8b9cb8;
|
||
}
|
||
.s-relay .mini-terminal .ok {
|
||
color: #60a5fa;
|
||
}
|
||
.s-relay .mini-flow {
|
||
color: #60a5fa;
|
||
}
|
||
.s-relay .mini-flow .node {
|
||
border-radius: 50%;
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
/* 13 — Patchline Signal */
|
||
.s-patchline {
|
||
background: #0e1014;
|
||
color: #e8eaef;
|
||
}
|
||
.s-patchline .mini-header {
|
||
font-family: "JetBrains Mono", monospace;
|
||
color: #facc15;
|
||
font-size: 12px;
|
||
}
|
||
.s-patchline .mini-hero h3 {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
.s-patchline .mini-btn {
|
||
background: #facc15;
|
||
color: #0e1014;
|
||
border-radius: 4px;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 9px;
|
||
}
|
||
.s-patchline .mini-terminal {
|
||
background: #161a22;
|
||
border: 1px solid #2a3040;
|
||
color: #6b7280;
|
||
}
|
||
.s-patchline .mini-terminal .ok {
|
||
color: #facc15;
|
||
}
|
||
.s-patchline .mini-flow {
|
||
color: #facc15;
|
||
}
|
||
.s-patchline::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 30px;
|
||
height: 40px;
|
||
opacity: 0.15;
|
||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 28 L30 18 L60 24 L90 10 L120 22 L150 8 L180 20 L200 14' fill='none' stroke='%23facc15' stroke-width='2'/%3E%3C/svg%3E") center / cover no-repeat;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 14 — Pipeline Stages */
|
||
.s-pipeline {
|
||
background: #0d1117;
|
||
color: #e6edf3;
|
||
}
|
||
.s-pipeline .mini-header {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
color: #3fb950;
|
||
font-size: 11px;
|
||
}
|
||
.s-pipeline .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
.s-pipeline .mini-btn {
|
||
background: #238636;
|
||
color: #fff;
|
||
border-radius: 6px;
|
||
}
|
||
.s-pipeline .mini-terminal {
|
||
background: #161b22;
|
||
border: 1px solid #30363d;
|
||
color: #7d8590;
|
||
}
|
||
.s-pipeline .mini-terminal .ok {
|
||
color: #3fb950;
|
||
}
|
||
.s-pipeline .mini-flow .node {
|
||
border-radius: 4px;
|
||
width: auto;
|
||
min-width: 36px;
|
||
height: 18px;
|
||
border-color: #3fb950;
|
||
background: rgba(63, 185, 80, 0.1);
|
||
}
|
||
.s-pipeline .mini-flow {
|
||
color: #3fb950;
|
||
}
|
||
|
||
/* 15 — Zapier Bright */
|
||
.s-zapier {
|
||
background: #fffaf5;
|
||
color: #1f1f1f;
|
||
}
|
||
.s-zapier .mini-header {
|
||
font-family: "Inter", sans-serif;
|
||
color: #ff4a00;
|
||
font-weight: 700;
|
||
}
|
||
.s-zapier .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 700;
|
||
color: #1f1f1f;
|
||
}
|
||
.s-zapier .mini-btn {
|
||
background: #ff4a00;
|
||
color: #fff;
|
||
border-radius: 999px;
|
||
}
|
||
.s-zapier .mini-terminal {
|
||
background: #fff;
|
||
border: 2px solid #ffe4d6;
|
||
color: #666;
|
||
box-shadow: 0 4px 12px rgba(255, 74, 0, 0.08);
|
||
}
|
||
.s-zapier .mini-terminal .ok {
|
||
color: #ff4a00;
|
||
}
|
||
.s-zapier .mini-flow {
|
||
color: #ff4a00;
|
||
}
|
||
.s-zapier .mini-flow .node {
|
||
border-radius: 12px;
|
||
background: #fff;
|
||
}
|
||
|
||
/* 16 — Make Connect */
|
||
.s-make {
|
||
background: linear-gradient(160deg, #1a0a2e 0%, #2d1050 100%);
|
||
color: #f0e6ff;
|
||
}
|
||
.s-make .mini-header {
|
||
font-family: "Outfit", sans-serif;
|
||
color: #e040fb;
|
||
}
|
||
.s-make .mini-hero h3 {
|
||
font-family: "Outfit", sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
.s-make .mini-btn {
|
||
background: linear-gradient(135deg, #e040fb, #7c4dff);
|
||
color: #fff;
|
||
border-radius: 12px;
|
||
}
|
||
.s-make .mini-terminal {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(224, 64, 251, 0.3);
|
||
color: #c4a8e0;
|
||
}
|
||
.s-make .mini-terminal .ok {
|
||
color: #e040fb;
|
||
}
|
||
.s-make .mini-flow {
|
||
color: #e040fb;
|
||
}
|
||
.s-make .mini-flow .node {
|
||
border-radius: 14px;
|
||
border-width: 2px;
|
||
}
|
||
|
||
/* 17 — Node Graph */
|
||
.s-nodegraph {
|
||
background: #080c10;
|
||
color: #d4e4f7;
|
||
}
|
||
.s-nodegraph .mini-header {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
color: #22d3ee;
|
||
}
|
||
.s-nodegraph .mini-hero h3 {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
}
|
||
.s-nodegraph .mini-btn {
|
||
background: #0891b2;
|
||
color: #fff;
|
||
border-radius: 6px;
|
||
}
|
||
.s-nodegraph .mini-terminal {
|
||
background: #0f1419;
|
||
border: 1px solid #1e3a4a;
|
||
color: #5a7a8f;
|
||
}
|
||
.s-nodegraph .mini-terminal .ok {
|
||
color: #22d3ee;
|
||
}
|
||
.s-nodegraph .mini-flow {
|
||
color: #22d3ee;
|
||
}
|
||
.s-nodegraph .mini-flow .node {
|
||
border-radius: 50%;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: rgba(34, 211, 238, 0.15);
|
||
}
|
||
.s-nodegraph::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.06) 1px, transparent 1px);
|
||
background-size: 20px 20px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 18 — CI Greenlight */
|
||
.s-ci {
|
||
background: #010409;
|
||
color: #f0f6fc;
|
||
}
|
||
.s-ci .mini-header {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
color: #3fb950;
|
||
}
|
||
.s-ci .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-size: 17px;
|
||
}
|
||
.s-ci .mini-btn {
|
||
background: #21262d;
|
||
color: #3fb950;
|
||
border: 1px solid #3fb950;
|
||
border-radius: 6px;
|
||
}
|
||
.s-ci .mini-terminal {
|
||
background: #0d1117;
|
||
border: 1px solid #30363d;
|
||
color: #7d8590;
|
||
}
|
||
.s-ci .mini-terminal .ok {
|
||
color: #3fb950;
|
||
}
|
||
.s-ci .mini-flow {
|
||
color: #3fb950;
|
||
}
|
||
|
||
/* 19 — Webhook Pulse */
|
||
.s-webhook {
|
||
background: #0a1628;
|
||
color: #dbeafe;
|
||
}
|
||
.s-webhook .mini-header {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
color: #38bdf8;
|
||
font-size: 11px;
|
||
}
|
||
.s-webhook .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
.s-webhook .mini-btn {
|
||
background: #0284c7;
|
||
color: #fff;
|
||
border-radius: 6px;
|
||
}
|
||
.s-webhook .mini-terminal {
|
||
background: rgba(56, 189, 248, 0.08);
|
||
border: 1px solid rgba(56, 189, 248, 0.25);
|
||
color: #64748b;
|
||
}
|
||
.s-webhook .mini-terminal .ok {
|
||
color: #38bdf8;
|
||
}
|
||
.s-webhook .mini-flow {
|
||
color: #38bdf8;
|
||
}
|
||
.s-webhook .mini-flow .node.on {
|
||
border-radius: 50%;
|
||
animation: pulse 2s ease infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0%,
|
||
100% {
|
||
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5);
|
||
}
|
||
50% {
|
||
box-shadow: 0 0 0 6px rgba(56, 189, 248, 0);
|
||
}
|
||
}
|
||
|
||
/* 20 — Ops Dashboard */
|
||
.s-opsdash {
|
||
background: #111318;
|
||
color: #e4e6eb;
|
||
}
|
||
.s-opsdash .mini-header {
|
||
font-family: "Inter", sans-serif;
|
||
color: #a3e635;
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.s-opsdash .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 600;
|
||
font-size: 17px;
|
||
}
|
||
.s-opsdash .mini-btn {
|
||
background: #65a30d;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
font-size: 9px;
|
||
}
|
||
.s-opsdash .mini-terminal {
|
||
background: #1a1d24;
|
||
border: 1px solid #2d323c;
|
||
color: #6b7280;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4px 8px;
|
||
}
|
||
.s-opsdash .mini-terminal .ok {
|
||
color: #a3e635;
|
||
}
|
||
.s-opsdash .mini-flow {
|
||
color: #a3e635;
|
||
}
|
||
.s-opsdash .mini-flow .node {
|
||
border-radius: 4px;
|
||
height: 24px;
|
||
width: 32px;
|
||
position: relative;
|
||
}
|
||
.s-opsdash .mini-flow .node.on::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 4px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: #a3e635;
|
||
}
|
||
|
||
.mini-time {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-top: 12px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.mini-hourglass {
|
||
width: 22px;
|
||
height: 30px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.mini-metric {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.mini-metric strong {
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 21 — Payback Green */
|
||
.s-payback {
|
||
background: #0a120e;
|
||
color: #e8f5ec;
|
||
}
|
||
.s-payback .mini-header {
|
||
font-family: "Inter", sans-serif;
|
||
color: #22c55e;
|
||
font-weight: 700;
|
||
}
|
||
.s-payback .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
.s-payback .mini-btn {
|
||
background: #22c55e;
|
||
color: #0a120e;
|
||
border-radius: 8px;
|
||
}
|
||
.s-payback .mini-terminal {
|
||
background: #111a14;
|
||
border: 1px solid #1e3d28;
|
||
color: #6b8f75;
|
||
}
|
||
.s-payback .mini-terminal .ok {
|
||
color: #22c55e;
|
||
}
|
||
.s-payback .mini-metric {
|
||
color: #22c55e;
|
||
}
|
||
.s-payback .hg-stroke {
|
||
stroke: #22c55e;
|
||
}
|
||
.s-payback .hg-fill {
|
||
fill: #22c55e;
|
||
}
|
||
|
||
/* 22 — Gold Sand */
|
||
.s-goldsand {
|
||
background: #0a0a0a;
|
||
color: #f5f0e6;
|
||
}
|
||
.s-goldsand .mini-header {
|
||
font-family: "Instrument Serif", serif;
|
||
font-style: italic;
|
||
color: #c9a962;
|
||
font-size: 14px;
|
||
}
|
||
.s-goldsand .mini-hero h3 {
|
||
font-family: "Instrument Serif", serif;
|
||
font-weight: 400;
|
||
font-size: 20px;
|
||
}
|
||
.s-goldsand .mini-btn {
|
||
border: 1px solid #c9a962;
|
||
color: #c9a962;
|
||
background: transparent;
|
||
border-radius: 2px;
|
||
}
|
||
.s-goldsand .mini-terminal {
|
||
border: 1px solid #2a2418;
|
||
color: #8a7d5c;
|
||
background: transparent;
|
||
}
|
||
.s-goldsand .mini-terminal .ok {
|
||
color: #c9a962;
|
||
}
|
||
.s-goldsand .mini-metric {
|
||
color: #c9a962;
|
||
}
|
||
.s-goldsand .hg-stroke {
|
||
stroke: #c9a962;
|
||
}
|
||
.s-goldsand .hg-fill {
|
||
fill: #c9a962;
|
||
}
|
||
|
||
/* 23 — Sand Timer Neon */
|
||
.s-sandneon {
|
||
background: #0a0e1a;
|
||
color: #eef2ff;
|
||
}
|
||
.s-sandneon .mini-header {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
color: #fbbf24;
|
||
}
|
||
.s-sandneon .mini-hero h3 {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
}
|
||
.s-sandneon .mini-btn {
|
||
background: #fbbf24;
|
||
color: #0a0e1a;
|
||
border-radius: 6px;
|
||
}
|
||
.s-sandneon .mini-terminal {
|
||
background: #0f1424;
|
||
border: 1px solid #28304f;
|
||
color: #7e89a8;
|
||
}
|
||
.s-sandneon .mini-terminal .ok {
|
||
color: #00e5a8;
|
||
}
|
||
.s-sandneon .mini-metric {
|
||
color: #fbbf24;
|
||
}
|
||
.s-sandneon .hg-stroke {
|
||
stroke: #fbbf24;
|
||
}
|
||
.s-sandneon .hg-fill {
|
||
fill: #fbbf24;
|
||
}
|
||
.s-sandneon .hg-sand {
|
||
animation: sand-fall 2.5s ease-in-out infinite;
|
||
}
|
||
@keyframes sand-fall {
|
||
0%,
|
||
100% {
|
||
opacity: 0.3;
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
transform: translateY(3px);
|
||
}
|
||
}
|
||
|
||
/* 24 — Minute Counter */
|
||
.s-minutes {
|
||
background: #111318;
|
||
color: #e4e6eb;
|
||
}
|
||
.s-minutes .mini-header {
|
||
font-family: "JetBrains Mono", monospace;
|
||
color: #94a3b8;
|
||
font-size: 11px;
|
||
}
|
||
.s-minutes .mini-hero h3 {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 15px;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.s-minutes .mini-btn {
|
||
background: #334155;
|
||
color: #f8fafc;
|
||
border-radius: 4px;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 9px;
|
||
}
|
||
.s-minutes .mini-terminal {
|
||
background: #1a1d24;
|
||
border: 1px solid #2d323c;
|
||
color: #64748b;
|
||
}
|
||
.s-minutes .mini-terminal .ok {
|
||
color: #38bdf8;
|
||
}
|
||
.s-minutes .mini-metric {
|
||
color: #38bdf8;
|
||
}
|
||
.s-minutes .hg-stroke {
|
||
stroke: #94a3b8;
|
||
}
|
||
.s-minutes .hg-fill {
|
||
fill: #38bdf8;
|
||
}
|
||
|
||
/* 25 — Time is Money */
|
||
.s-timemoney {
|
||
background: linear-gradient(145deg, #1a1408 0%, #0d0d0d 100%);
|
||
color: #faf6eb;
|
||
}
|
||
.s-timemoney .mini-header {
|
||
font-family: "Inter", sans-serif;
|
||
color: #eab308;
|
||
font-weight: 700;
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.s-timemoney .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 700;
|
||
}
|
||
.s-timemoney .mini-btn {
|
||
background: linear-gradient(135deg, #eab308, #ca8a04);
|
||
color: #1a1408;
|
||
border-radius: 6px;
|
||
}
|
||
.s-timemoney .mini-terminal {
|
||
background: rgba(234, 179, 8, 0.06);
|
||
border: 1px solid rgba(234, 179, 8, 0.25);
|
||
color: #a08c50;
|
||
}
|
||
.s-timemoney .mini-terminal .ok {
|
||
color: #eab308;
|
||
}
|
||
.s-timemoney .mini-metric {
|
||
color: #eab308;
|
||
}
|
||
.s-timemoney .hg-stroke {
|
||
stroke: #eab308;
|
||
}
|
||
.s-timemoney .hg-fill {
|
||
fill: #eab308;
|
||
}
|
||
.s-timemoney::before {
|
||
content: "$";
|
||
position: absolute;
|
||
right: 16px;
|
||
top: 12px;
|
||
font-size: 48px;
|
||
font-weight: 700;
|
||
color: rgba(234, 179, 8, 0.06);
|
||
font-family: "Inter", sans-serif;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 26 — Hourback Relay */
|
||
.s-hourrelay {
|
||
background: linear-gradient(180deg, #0f1419 0%, #151b24 100%);
|
||
color: #e8ecf4;
|
||
}
|
||
.s-hourrelay .mini-header {
|
||
font-family: "Inter", sans-serif;
|
||
color: #60a5fa;
|
||
}
|
||
.s-hourrelay .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
.s-hourrelay .mini-btn {
|
||
background: #60a5fa;
|
||
color: #0f1419;
|
||
border-radius: 8px;
|
||
}
|
||
.s-hourrelay .mini-terminal {
|
||
background: rgba(96, 165, 250, 0.06);
|
||
border: 1px solid rgba(96, 165, 250, 0.2);
|
||
color: #7e8fa8;
|
||
}
|
||
.s-hourrelay .mini-terminal .ok {
|
||
color: #60a5fa;
|
||
}
|
||
.s-hourrelay .mini-metric {
|
||
color: #60a5fa;
|
||
}
|
||
.s-hourrelay .hg-stroke {
|
||
stroke: #60a5fa;
|
||
}
|
||
.s-hourrelay .hg-fill {
|
||
fill: #60a5fa;
|
||
}
|
||
|
||
/* 27 — Urgent Sand */
|
||
.s-urgent {
|
||
background: #140a08;
|
||
color: #fef2f2;
|
||
}
|
||
.s-urgent .mini-header {
|
||
font-family: "Syne", sans-serif;
|
||
color: #f97316;
|
||
text-transform: uppercase;
|
||
font-size: 10px;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.s-urgent .mini-hero h3 {
|
||
font-family: "Syne", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 17px;
|
||
}
|
||
.s-urgent .mini-btn {
|
||
background: #f97316;
|
||
color: #140a08;
|
||
border-radius: 4px;
|
||
text-transform: uppercase;
|
||
font-size: 9px;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.s-urgent .mini-terminal {
|
||
background: #1f1210;
|
||
border-left: 3px solid #f97316;
|
||
color: #9a6b60;
|
||
}
|
||
.s-urgent .mini-terminal .ok {
|
||
color: #fb923c;
|
||
}
|
||
.s-urgent .mini-metric {
|
||
color: #f97316;
|
||
}
|
||
.s-urgent .hg-stroke {
|
||
stroke: #f97316;
|
||
}
|
||
.s-urgent .hg-fill {
|
||
fill: #f97316;
|
||
}
|
||
|
||
/* 28 — Ledger Payback */
|
||
.s-ledger {
|
||
background: #f8faf8;
|
||
color: #1a2e1a;
|
||
}
|
||
.s-ledger .mini-header {
|
||
font-family: "Libre Baskerville", serif;
|
||
color: #166534;
|
||
}
|
||
.s-ledger .mini-hero h3 {
|
||
font-family: "Libre Baskerville", serif;
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
}
|
||
.s-ledger .mini-btn {
|
||
background: #166534;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
.s-ledger .mini-terminal {
|
||
background: #fff;
|
||
border: 1px solid #c6e0c6;
|
||
color: #4a6b4a;
|
||
font-family: "IBM Plex Mono", monospace;
|
||
}
|
||
.s-ledger .mini-terminal .ok {
|
||
color: #166534;
|
||
}
|
||
.s-ledger .mini-metric {
|
||
color: #166534;
|
||
}
|
||
.s-ledger .hg-stroke {
|
||
stroke: #166534;
|
||
}
|
||
.s-ledger .hg-fill {
|
||
fill: #166534;
|
||
}
|
||
|
||
/* 29 — Compound Time */
|
||
.s-compound {
|
||
background: linear-gradient(160deg, #1a1033 0%, #0f0a1a 100%);
|
||
color: #ede9fe;
|
||
}
|
||
.s-compound .mini-header {
|
||
font-family: "Outfit", sans-serif;
|
||
color: #a78bfa;
|
||
}
|
||
.s-compound .mini-hero h3 {
|
||
font-family: "Outfit", sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
.s-compound .mini-btn {
|
||
background: #7c3aed;
|
||
color: #fff;
|
||
border-radius: 10px;
|
||
}
|
||
.s-compound .mini-terminal {
|
||
background: rgba(167, 139, 250, 0.08);
|
||
border: 1px solid rgba(167, 139, 250, 0.2);
|
||
color: #9b8ec4;
|
||
}
|
||
.s-compound .mini-terminal .ok {
|
||
color: #a78bfa;
|
||
}
|
||
.s-compound .mini-metric {
|
||
color: #a78bfa;
|
||
}
|
||
.s-compound .hg-stroke {
|
||
stroke: #a78bfa;
|
||
}
|
||
.s-compound .hg-fill {
|
||
fill: #a78bfa;
|
||
}
|
||
|
||
/* 30 — Automation Saves */
|
||
.s-saves {
|
||
background: #0c1018;
|
||
color: #e2e8f0;
|
||
}
|
||
.s-saves .mini-header {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
color: #00e5a8;
|
||
}
|
||
.s-saves .mini-hero h3 {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
}
|
||
.s-saves .mini-btn {
|
||
background: #00e5a8;
|
||
color: #0c1018;
|
||
border-radius: 8px;
|
||
}
|
||
.s-saves .mini-terminal {
|
||
background: #141a28;
|
||
border: 1px solid #28304f;
|
||
color: #7e89a8;
|
||
}
|
||
.s-saves .mini-terminal .ok {
|
||
color: #00e5a8;
|
||
}
|
||
.s-saves .mini-metric {
|
||
color: #00e5a8;
|
||
}
|
||
.s-saves .hg-stroke {
|
||
stroke: #00e5a8;
|
||
}
|
||
.s-saves .hg-fill {
|
||
fill: #00e5a8;
|
||
}
|
||
.s-saves::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(circle at 70% 30%, rgba(0, 229, 168, 0.1), transparent 55%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.mini-terminal .prompt {
|
||
opacity: 0.7;
|
||
}
|
||
.mini-terminal .err {
|
||
color: #f87171;
|
||
}
|
||
.mini-terminal .dim {
|
||
opacity: 0.55;
|
||
}
|
||
.mini-terminal .hl {
|
||
color: inherit;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.mini-rack {
|
||
display: flex;
|
||
gap: 4px;
|
||
margin-top: 10px;
|
||
}
|
||
.mini-rack span {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: #333;
|
||
}
|
||
.mini-rack span.on {
|
||
box-shadow: 0 0 6px currentColor;
|
||
}
|
||
|
||
.mini-code {
|
||
margin-top: 12px;
|
||
padding: 8px 10px;
|
||
border-radius: 6px;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 8px;
|
||
line-height: 1.55;
|
||
text-align: left;
|
||
}
|
||
.mini-code .kw {
|
||
color: #c678dd;
|
||
}
|
||
.mini-code .fn {
|
||
color: #61afef;
|
||
}
|
||
.mini-code .str {
|
||
color: #98c379;
|
||
}
|
||
.mini-code .cm {
|
||
opacity: 0.45;
|
||
}
|
||
|
||
/* 31 — Matrix Terminal */
|
||
.s-matrix {
|
||
background: #000;
|
||
color: #00ff41;
|
||
}
|
||
.s-matrix .mini-header {
|
||
font-family: "JetBrains Mono", monospace;
|
||
color: #00ff41;
|
||
text-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
|
||
}
|
||
.s-matrix .mini-hero h3 {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 14px;
|
||
text-transform: uppercase;
|
||
}
|
||
.s-matrix .mini-btn {
|
||
background: #00ff41;
|
||
color: #000;
|
||
border-radius: 0;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 9px;
|
||
}
|
||
.s-matrix .mini-terminal {
|
||
background: #001a00;
|
||
border: 1px solid #00ff4133;
|
||
color: #00cc33;
|
||
box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.05);
|
||
}
|
||
.s-matrix .mini-terminal .ok {
|
||
color: #00ff41;
|
||
}
|
||
.s-matrix::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: repeating-linear-gradient(
|
||
0deg,
|
||
transparent,
|
||
transparent 2px,
|
||
rgba(0, 255, 65, 0.03) 2px,
|
||
rgba(0, 255, 65, 0.03) 4px
|
||
);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 32 — SSH Session */
|
||
.s-ssh {
|
||
background: #1e1e1e;
|
||
color: #d4d4d4;
|
||
}
|
||
.s-ssh .mini-header {
|
||
font-family: "JetBrains Mono", monospace;
|
||
color: #4ec9b0;
|
||
font-size: 11px;
|
||
}
|
||
.s-ssh .mini-hero h3 {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 14px;
|
||
}
|
||
.s-ssh .mini-btn {
|
||
background: #0e639c;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 9px;
|
||
}
|
||
.s-ssh .mini-terminal {
|
||
background: #0c0c0c;
|
||
border: 1px solid #333;
|
||
color: #9cdcfe;
|
||
border-radius: 0;
|
||
}
|
||
.s-ssh .mini-terminal .ok {
|
||
color: #4ec9b0;
|
||
}
|
||
.s-ssh .mini-terminal .prompt {
|
||
color: #dcdcaa;
|
||
}
|
||
|
||
/* 33 — Server Rack */
|
||
.s-rack {
|
||
background: #0d0d0d;
|
||
color: #c8c8c8;
|
||
}
|
||
.s-rack .mini-header {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
color: #a3e635;
|
||
font-size: 10px;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.s-rack .mini-hero h3 {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 14px;
|
||
}
|
||
.s-rack .mini-btn {
|
||
background: #262626;
|
||
color: #a3e635;
|
||
border: 1px solid #a3e635;
|
||
border-radius: 2px;
|
||
font-size: 9px;
|
||
}
|
||
.s-rack .mini-terminal {
|
||
background: #141414;
|
||
border: 1px solid #2a2a2a;
|
||
color: #6b6b6b;
|
||
font-size: 8px;
|
||
}
|
||
.s-rack .mini-terminal .ok {
|
||
color: #a3e635;
|
||
}
|
||
.s-rack .mini-rack span.on:nth-child(1) {
|
||
background: #a3e635;
|
||
color: #a3e635;
|
||
}
|
||
.s-rack .mini-rack span.on:nth-child(2) {
|
||
background: #22c55e;
|
||
color: #22c55e;
|
||
}
|
||
.s-rack .mini-rack span.on:nth-child(3) {
|
||
background: #eab308;
|
||
color: #eab308;
|
||
}
|
||
.s-rack .mini-rack span.on:nth-child(4) {
|
||
background: #a3e635;
|
||
color: #a3e635;
|
||
}
|
||
|
||
/* 34 — Syntax Hacker */
|
||
.s-syntax {
|
||
background: #282c34;
|
||
color: #abb2bf;
|
||
}
|
||
.s-syntax .mini-header {
|
||
font-family: "JetBrains Mono", monospace;
|
||
color: #61afef;
|
||
}
|
||
.s-syntax .mini-hero h3 {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 14px;
|
||
}
|
||
.s-syntax .mini-btn {
|
||
background: #61afef;
|
||
color: #282c34;
|
||
border-radius: 6px;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 9px;
|
||
}
|
||
.s-syntax .mini-code {
|
||
background: #21252b;
|
||
border: 1px solid #181a1f;
|
||
color: #abb2bf;
|
||
}
|
||
.s-syntax .mini-terminal {
|
||
background: #21252b;
|
||
border: 1px solid #181a1f;
|
||
color: #5c6370;
|
||
margin-top: 8px;
|
||
}
|
||
.s-syntax .mini-terminal .ok {
|
||
color: #98c379;
|
||
}
|
||
|
||
/* 35 — Datacenter Cold */
|
||
.s-datacenter {
|
||
background: linear-gradient(180deg, #0a1628 0%, #060d18 100%);
|
||
color: #bfdbfe;
|
||
}
|
||
.s-datacenter .mini-header {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
color: #38bdf8;
|
||
font-size: 10px;
|
||
}
|
||
.s-datacenter .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
}
|
||
.s-datacenter .mini-btn {
|
||
background: #0284c7;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
font-size: 9px;
|
||
}
|
||
.s-datacenter .mini-terminal {
|
||
background: rgba(0, 0, 0, 0.4);
|
||
border: 1px solid #1e3a5f;
|
||
color: #64748b;
|
||
}
|
||
.s-datacenter .mini-terminal .ok {
|
||
color: #38bdf8;
|
||
}
|
||
.s-datacenter::after {
|
||
content: "DC-01 · rack A14";
|
||
position: absolute;
|
||
right: 12px;
|
||
bottom: 10px;
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 7px;
|
||
color: #1e3a5f;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
/* 36 — Root Shell */
|
||
.s-root {
|
||
background: #000;
|
||
color: #f5f5f5;
|
||
}
|
||
.s-root .mini-header {
|
||
font-family: "JetBrains Mono", monospace;
|
||
color: #ef4444;
|
||
font-size: 11px;
|
||
}
|
||
.s-root .mini-hero h3 {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 14px;
|
||
}
|
||
.s-root .mini-btn {
|
||
background: #ef4444;
|
||
color: #000;
|
||
border-radius: 0;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
}
|
||
.s-root .mini-terminal {
|
||
background: #0a0a0a;
|
||
border: 2px solid #ef4444;
|
||
color: #a3a3a3;
|
||
}
|
||
.s-root .mini-terminal .prompt {
|
||
color: #ef4444;
|
||
}
|
||
.s-root .mini-terminal .ok {
|
||
color: #22c55e;
|
||
}
|
||
|
||
/* 37 — Serial Console */
|
||
.s-serial {
|
||
background: #0c0c0c;
|
||
color: #33ff33;
|
||
}
|
||
.s-serial .mini-header,
|
||
.s-serial .mini-hero h3 {
|
||
font-family: "JetBrains Mono", monospace;
|
||
color: #33ff33;
|
||
font-size: 13px;
|
||
}
|
||
.s-serial .mini-btn {
|
||
background: transparent;
|
||
color: #33ff33;
|
||
border: 1px solid #33ff33;
|
||
border-radius: 0;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 9px;
|
||
}
|
||
.s-serial .mini-terminal {
|
||
background: #000;
|
||
border: none;
|
||
color: #228822;
|
||
font-size: 8px;
|
||
}
|
||
.s-serial .mini-terminal .ok {
|
||
color: #33ff33;
|
||
}
|
||
.s-serial::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.6) 100%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 38 — Syslog Tail */
|
||
.s-syslog {
|
||
background: #111;
|
||
color: #ccc;
|
||
}
|
||
.s-syslog .mini-header {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
color: #888;
|
||
font-size: 10px;
|
||
}
|
||
.s-syslog .mini-hero h3 {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 13px;
|
||
color: #eee;
|
||
}
|
||
.s-syslog .mini-btn {
|
||
background: #333;
|
||
color: #fff;
|
||
border-radius: 2px;
|
||
font-family: "IBM Plex Mono", monospace;
|
||
font-size: 9px;
|
||
}
|
||
.s-syslog .mini-terminal {
|
||
background: #0a0a0a;
|
||
border-left: 2px solid #555;
|
||
color: #666;
|
||
font-size: 7px;
|
||
line-height: 1.6;
|
||
}
|
||
.s-syslog .mini-terminal .ok {
|
||
color: #7ec8e3;
|
||
}
|
||
.s-syslog .mini-terminal .warn {
|
||
color: #eab308;
|
||
}
|
||
|
||
/* 39 — Docker / K8s */
|
||
.s-k8s {
|
||
background: #0f1419;
|
||
color: #e2e8f0;
|
||
}
|
||
.s-k8s .mini-header {
|
||
font-family: "JetBrains Mono", monospace;
|
||
color: #326ce5;
|
||
font-size: 11px;
|
||
}
|
||
.s-k8s .mini-hero h3 {
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
}
|
||
.s-k8s .mini-btn {
|
||
background: #326ce5;
|
||
color: #fff;
|
||
border-radius: 6px;
|
||
font-size: 9px;
|
||
}
|
||
.s-k8s .mini-terminal {
|
||
background: #1a1f26;
|
||
border: 1px solid #2d3748;
|
||
color: #718096;
|
||
}
|
||
.s-k8s .mini-terminal .ok {
|
||
color: #48bb78;
|
||
}
|
||
.s-k8s .mini-terminal .hl {
|
||
color: #63b3ed;
|
||
}
|
||
|
||
/* 40 — Brutalist Server (your pick + server) */
|
||
.s-brutal-srv {
|
||
background: #e8e8e8;
|
||
color: #111;
|
||
}
|
||
.s-brutal-srv .mini-header {
|
||
font-family: "JetBrains Mono", monospace;
|
||
background: #111;
|
||
color: #0f0;
|
||
padding: 4px 8px;
|
||
display: inline-block;
|
||
font-size: 10px;
|
||
}
|
||
.s-brutal-srv .mini-hero h3 {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
font-size: 14px;
|
||
}
|
||
.s-brutal-srv .mini-btn {
|
||
background: #ff3300;
|
||
color: #fff;
|
||
border-radius: 0;
|
||
box-shadow: 4px 4px 0 #111;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 9px;
|
||
}
|
||
.s-brutal-srv .mini-terminal {
|
||
background: #111;
|
||
color: #0f0;
|
||
border: 3px solid #111;
|
||
border-radius: 0;
|
||
}
|
||
.s-brutal-srv .mini-terminal .ok {
|
||
color: #0f0;
|
||
}
|
||
.s-brutal-srv .mini-terminal .prompt {
|
||
color: #ff3300;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<header>
|
||
<p class="eyebrow">Visual direction</p>
|
||
<h1>40 style ideas for the site</h1>
|
||
<p class="lede">
|
||
You liked <strong>Brutalist Mono</strong> and <strong>Swiss Minimal</strong> — Round 4 (#31–40) goes
|
||
further into <strong>hacker code, SSH, and server</strong> aesthetics. Click to pick.
|
||
</p>
|
||
</header>
|
||
|
||
<div class="toolbar">
|
||
<span class="pick-label">Your pick: <span class="pick-value" id="pick-display">none yet</span></span>
|
||
<button class="btn" type="button" id="clear-pick">Clear</button>
|
||
<button class="btn" type="button" id="copy-pick">Copy choice</button>
|
||
</div>
|
||
|
||
<div class="grid" id="styles"></div>
|
||
</div>
|
||
|
||
<script>
|
||
const styles = [
|
||
{
|
||
id: 1,
|
||
name: "Terminal Neon",
|
||
class: "s-terminal-neon",
|
||
desc: "What you have now — dark, mint accent, grid glow, dev-tool aesthetic. Credible for engineers, maybe cold for non-technical buyers.",
|
||
tags: ["current", "dark", "technical", "mint"],
|
||
brand: "Runloop",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "Light Editorial",
|
||
class: "s-light-editorial",
|
||
desc: "Warm off-white, serif headlines, magazine layout. Feels like a senior consultant, not a hacker. Great if you want trust over flash.",
|
||
tags: ["light", "serif", "premium", "calm"],
|
||
brand: "Flowcraft",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "Swiss Minimal",
|
||
class: "s-swiss",
|
||
desc: "Black on white, tight typography, zero decoration. Confident and timeless. Lets your copy do the work.",
|
||
tags: ["minimal", "light", "stark", "timeless"],
|
||
brand: "Relay",
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "Warm Studio",
|
||
class: "s-warm",
|
||
desc: "Cream, terracotta, rounded buttons. Human and approachable — good for small business owners who find “terminal” intimidating.",
|
||
tags: ["warm", "friendly", "consultancy"],
|
||
brand: "Quiet Ops",
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "Blueprint",
|
||
class: "s-blueprint",
|
||
desc: "Engineering drawing vibe — grid background, dashed borders, blueprint blue. Technical but structured, not neon-bro.",
|
||
tags: ["technical", "dark", "structured"],
|
||
brand: "Conduit",
|
||
},
|
||
{
|
||
id: 6,
|
||
name: "Brutalist Mono",
|
||
class: "s-brutalist",
|
||
desc: "Raw monospace, harsh contrast, red accent. Memorable and opinionated. Polarizing — you'll love it or hate it.",
|
||
tags: ["bold", "mono", "polarizing"],
|
||
brand: "Patchline",
|
||
},
|
||
{
|
||
id: 7,
|
||
name: "Soft SaaS",
|
||
class: "s-soft-saas",
|
||
desc: "Purple gradients, glass cards, rounded UI. Modern startup energy. Risk: looks like every AI landing page in 2024.",
|
||
tags: ["gradient", "modern", "startup"],
|
||
brand: "Triggerline",
|
||
},
|
||
{
|
||
id: 8,
|
||
name: "Industrial",
|
||
class: "s-industrial",
|
||
desc: "Dark steel + safety orange. Ops/manufacturing feel — “production systems” without the hacker aesthetic.",
|
||
tags: ["dark", "ops", "bold accent"],
|
||
brand: "Stillrun",
|
||
},
|
||
{
|
||
id: 9,
|
||
name: "Paper & Ink",
|
||
class: "s-paper",
|
||
desc: "Off-white paper, navy ink, subtle shadows. Professional services firm meets craft. Understated and trustworthy.",
|
||
tags: ["light", "professional", "classic"],
|
||
brand: "Offload",
|
||
},
|
||
{
|
||
id: 10,
|
||
name: "Monochrome Luxe",
|
||
class: "s-luxe",
|
||
desc: "Black, gold accent, italic serif. High-end consultancy positioning. Less “automation nerd,” more “trusted advisor.”",
|
||
tags: ["dark", "premium", "serif", "gold"],
|
||
brand: "Levkin",
|
||
},
|
||
{
|
||
id: 11,
|
||
name: "n8n Canvas",
|
||
class: "s-n8n",
|
||
desc: "Looks like a workflow builder — dark canvas, rounded node cards, coral accent. Instantly reads as “automation platform.” Closest to n8n / Make energy.",
|
||
tags: ["n8n-like", "nodes", "workflow", "dark"],
|
||
brand: "Flowcraft",
|
||
flow: true,
|
||
},
|
||
{
|
||
id: 12,
|
||
name: "Relay Handoff",
|
||
class: "s-relay",
|
||
desc: "Clean, minimal, electric blue — matches the Relay name vibe. Circular nodes, soft borders, “pass it along” feel. Technical but not intimidating.",
|
||
tags: ["relay-like", "minimal", "blue", "handoff"],
|
||
brand: "Relay",
|
||
flow: true,
|
||
},
|
||
{
|
||
id: 13,
|
||
name: "Patchline Signal",
|
||
class: "s-patchline",
|
||
desc: "Dark + signal-yellow accent, waveform in the background, mono CTAs. Pragmatic integrator energy — “we patch your stack together.” Pairs with Patchline brand.",
|
||
tags: ["patchline-like", "yellow", "signal", "mono"],
|
||
brand: "Patchline",
|
||
flow: true,
|
||
},
|
||
{
|
||
id: 14,
|
||
name: "Pipeline Stages",
|
||
class: "s-pipeline",
|
||
desc: "GitHub Actions / CI green — stage pills, checkmarks, YAML-terminal feel. Says “production pipeline” louder than “no-code toy.”",
|
||
tags: ["CI/CD", "github", "pipeline", "green"],
|
||
brand: "Mainline",
|
||
flow: true,
|
||
},
|
||
{
|
||
id: 15,
|
||
name: "Zapier Bright",
|
||
class: "s-zapier",
|
||
desc: "Light background, Zapier-orange, friendly rounded UI. Reads as accessible automation for business owners — less hacker, more “connect your apps.”",
|
||
tags: ["zapier-like", "orange", "light", "friendly"],
|
||
brand: "Splice",
|
||
flow: true,
|
||
},
|
||
{
|
||
id: 16,
|
||
name: "Make Connect",
|
||
class: "s-make",
|
||
desc: "Purple gradient, magenta nodes, rounded modules. Make.com / Integromat aesthetic — visual, modular, “scenarios” energy.",
|
||
tags: ["make-like", "purple", "modules", "gradient"],
|
||
brand: "Workloom",
|
||
flow: true,
|
||
},
|
||
{
|
||
id: 17,
|
||
name: "Node Graph",
|
||
class: "s-nodegraph",
|
||
desc: "Dot grid background, cyan nodes, graph-paper feel. Generic workflow-builder look — works with any automation brand name.",
|
||
tags: ["graph", "nodes", "cyan", "builder"],
|
||
brand: "Conduit",
|
||
flow: true,
|
||
},
|
||
{
|
||
id: 18,
|
||
name: "CI Greenlight",
|
||
class: "s-ci",
|
||
desc: "GitHub-dark, green status checks, outlined CTA. Pure “ship to production” — best if you want engineering credibility front and center.",
|
||
tags: ["github", "checks", "deploy", "engineering"],
|
||
brand: "Runloop",
|
||
flow: true,
|
||
},
|
||
{
|
||
id: 19,
|
||
name: "Webhook Pulse",
|
||
class: "s-webhook",
|
||
desc: "Event-driven aesthetic — pulsing trigger node, sky-blue on navy. Perfect for webhook/trigger positioning; feels live and reactive.",
|
||
tags: ["webhooks", "events", "pulse", "real-time"],
|
||
brand: "Triggerline",
|
||
flow: true,
|
||
},
|
||
{
|
||
id: 20,
|
||
name: "Ops Dashboard",
|
||
class: "s-opsdash",
|
||
desc: "Monitoring dashboard vibe — status lights on nodes, lime accent, metric-grid terminal. “Automation you can watch” — ops/SRE friendly.",
|
||
tags: ["dashboard", "monitoring", "ops", "status"],
|
||
brand: "Stillrun",
|
||
flow: true,
|
||
},
|
||
{
|
||
id: 21,
|
||
name: "Payback Green",
|
||
class: "s-payback",
|
||
desc: "Hourglass + green ROI metric — literal “payback” energy. Matches Payback / Paidhour brand names. Clean Inter, money-return story.",
|
||
tags: ["payback", "hourglass", "green", "ROI"],
|
||
brand: "Payback",
|
||
time: "8 hrs → 90 sec",
|
||
},
|
||
{
|
||
id: 22,
|
||
name: "Gold Sand",
|
||
class: "s-goldsand",
|
||
desc: "Black + gold hourglass — “time is money” luxury. Serif headlines, gold sand in the logo. Pairs with Goldminute brand.",
|
||
tags: ["gold", "hourglass", "premium", "money"],
|
||
brand: "Goldminute",
|
||
time: "$ saved / week",
|
||
},
|
||
{
|
||
id: 23,
|
||
name: "Sand Timer Neon",
|
||
class: "s-sandneon",
|
||
desc: "Your current site palette + animated falling sand in the hourglass. Urgency (sand running) + automation (mint terminal). Best of both worlds.",
|
||
tags: ["hourglass", "neon", "animated", "urgency"],
|
||
brand: "Timesand",
|
||
time: "14 steps eliminated",
|
||
sandAnim: true,
|
||
},
|
||
{
|
||
id: 24,
|
||
name: "Minute Counter",
|
||
class: "s-minutes",
|
||
desc: "Monospace, dashboard counters, blue accent on minutes saved. Feels like a timer app — precise, measurable, engineer-trustworthy.",
|
||
tags: ["minutes", "mono", "counter", "precise"],
|
||
brand: "Minutebank",
|
||
time: "480 min/mo saved",
|
||
},
|
||
{
|
||
id: 25,
|
||
name: "Time is Money",
|
||
class: "s-timemoney",
|
||
desc: "Gold on black, subtle $ watermark, hourglass in hero. Says the value prop without a word of copy. Bold for ROI-focused landing pages.",
|
||
tags: ["money", "gold", "hourglass", "bold"],
|
||
brand: "Bankable",
|
||
time: "time = margin",
|
||
},
|
||
{
|
||
id: 26,
|
||
name: "Hourglass Relay",
|
||
class: "s-hourrelay",
|
||
desc: "Relay-blue minimal + hourglass metric row. If you like Relay’s cleanliness but want time/payback front and center.",
|
||
tags: ["relay-like", "hourglass", "blue", "minimal"],
|
||
brand: "Buyback",
|
||
time: "hours returned",
|
||
},
|
||
{
|
||
id: 27,
|
||
name: "Urgent Sand",
|
||
class: "s-urgent",
|
||
desc: "Orange hourglass, dark red-black bg — sand running out, automate now. High urgency without being scammy. Good for “stop wasting hours” messaging.",
|
||
tags: ["urgency", "orange", "hourglass", "ops"],
|
||
brand: "Sandclock",
|
||
time: "before sand runs out",
|
||
},
|
||
{
|
||
id: 28,
|
||
name: "Ledger Payback",
|
||
class: "s-ledger",
|
||
desc: "Light green ledger aesthetic — hourglass as accounting line item. CFO-friendly, trustworthy, “savings on the books.”",
|
||
tags: ["ledger", "light", "payback", "trust"],
|
||
brand: "Paidhour",
|
||
time: "ROI on every run",
|
||
},
|
||
{
|
||
id: 29,
|
||
name: "Compound Time",
|
||
class: "s-compound",
|
||
desc: "Purple, stacked savings metaphor — hourglass + compounding returns. Retainer / roadmap story: automations stack over time.",
|
||
tags: ["compound", "purple", "hourglass", "growth"],
|
||
brand: "Compound",
|
||
time: "savings stack",
|
||
},
|
||
{
|
||
id: 30,
|
||
name: "Automation Saves",
|
||
class: "s-saves",
|
||
desc: "Mint terminal + hourglass — automation tool look with time-saved proof. Closest to your live site, but hourglass makes ROI visible.",
|
||
tags: ["automation", "mint", "hourglass", "current+"],
|
||
brand: "Hourback",
|
||
time: "8 hrs → 90 sec",
|
||
},
|
||
{
|
||
id: 31,
|
||
name: "Matrix Terminal",
|
||
class: "s-matrix",
|
||
desc: "Classic hacker green-on-black — phosphor glow, scanlines. Pure “I write code in the dark.” Pairs with Patchline / Runloop names.",
|
||
tags: ["hacker", "matrix", "green", "terminal"],
|
||
brand: "Patchline",
|
||
terminal: "matrix",
|
||
},
|
||
{
|
||
id: 32,
|
||
name: "SSH Session",
|
||
class: "s-ssh",
|
||
desc: "VS Code / real SSH vibes — blue strings, teal success, dark chrome. Feels like you SSH’d into prod and fixed it.",
|
||
tags: ["ssh", "server", "mono", "dev"],
|
||
brand: "Runloop",
|
||
terminal: "ssh",
|
||
},
|
||
{
|
||
id: 33,
|
||
name: "Server Rack",
|
||
class: "s-rack",
|
||
desc: "Datacenter rack LEDs + syslog lines. “Production server” not “landing page.” Great for ops/CI positioning.",
|
||
tags: ["server", "rack", "ops", "status"],
|
||
brand: "Mainline",
|
||
terminal: "rack",
|
||
},
|
||
{
|
||
id: 34,
|
||
name: "Syntax Hacker",
|
||
class: "s-syntax",
|
||
desc: "One Dark Pro code editor as the hero — Python/JS colors, then a small terminal below. Best “I actually write scripts” signal.",
|
||
tags: ["code", "syntax", "hacker", "editor"],
|
||
brand: "Patchline",
|
||
terminal: "code",
|
||
},
|
||
{
|
||
id: 35,
|
||
name: "Datacenter Cold",
|
||
class: "s-datacenter",
|
||
desc: "Cold blue server room — rack label watermark, restrained. Enterprise infra without the matrix cliché.",
|
||
tags: ["datacenter", "server", "blue", "enterprise"],
|
||
brand: "Conduit",
|
||
terminal: "datacenter",
|
||
},
|
||
{
|
||
id: 36,
|
||
name: "Root Shell",
|
||
class: "s-root",
|
||
desc: "root@ prod — red prompt, black void, green OK. High stakes, high skill. More intense than Brutalist Mono.",
|
||
tags: ["root", "shell", "red", "prod"],
|
||
brand: "Stillrun",
|
||
terminal: "root",
|
||
},
|
||
{
|
||
id: 37,
|
||
name: "Serial Console",
|
||
class: "s-serial",
|
||
desc: "Bare-metal serial port — chunky green text, no chrome. Like configuring a box over IPMI. Very old-school server.",
|
||
tags: ["serial", "bare-metal", "green", "minimal"],
|
||
brand: "Relay",
|
||
terminal: "serial",
|
||
},
|
||
{
|
||
id: 38,
|
||
name: "Syslog Tail",
|
||
class: "s-syslog",
|
||
desc: "tail -f /var/log — timestamps, INFO/WARN lines, cron firing. Automation as background daemon.",
|
||
tags: ["syslog", "logs", "cron", "server"],
|
||
brand: "Quiet Ops",
|
||
terminal: "syslog",
|
||
},
|
||
{
|
||
id: 39,
|
||
name: "K8s / Container",
|
||
class: "s-k8s",
|
||
desc: "kubectl apply, pods running — modern infra stack. For CI/CD and pipeline buyers who live in YAML.",
|
||
tags: ["k8s", "docker", "deploy", "yaml"],
|
||
brand: "Runloop",
|
||
terminal: "k8s",
|
||
},
|
||
{
|
||
id: 40,
|
||
name: "Brutalist Server",
|
||
class: "s-brutal-srv",
|
||
desc: "Your Brutalist Mono pick — but explicitly server: red prompt, green output, black terminal. Opinionated + technical.",
|
||
tags: ["brutalist", "server", "your-pick+", "hacker"],
|
||
brand: "Patchline",
|
||
terminal: "brutal",
|
||
},
|
||
];
|
||
|
||
const grid = document.getElementById("styles");
|
||
let picked = localStorage.getItem("style-pick") || "";
|
||
|
||
function flowHtml() {
|
||
return `
|
||
<div class="mini-flow" aria-hidden="true">
|
||
<span class="node"></span><span class="wire"></span>
|
||
<span class="node on"></span><span class="wire"></span>
|
||
<span class="node"></span>
|
||
</div>`;
|
||
}
|
||
|
||
function hourglassSvg(animated) {
|
||
const sand = animated
|
||
? `<circle class="hg-sand hg-fill" cx="12" cy="11" r="1"/><circle class="hg-sand hg-fill" cx="12" cy="15" r="1" opacity="0.6"/>`
|
||
: `<path class="hg-fill" d="M9 19h6l-3 4-3-4z" opacity="0.45"/>`;
|
||
return `<svg class="mini-hourglass" viewBox="0 0 24 32" fill="none" aria-hidden="true">
|
||
<path class="hg-stroke" d="M6 4h12l-6 8 6 8H6l6-8-6-8z" stroke-width="1.8" stroke-linejoin="round"/>
|
||
${sand}
|
||
</svg>`;
|
||
}
|
||
|
||
function timeHtml(metric, animated) {
|
||
return `
|
||
<div class="mini-time" aria-hidden="true">
|
||
${hourglassSvg(animated)}
|
||
<span class="mini-metric"><strong>${metric}</strong></span>
|
||
</div>`;
|
||
}
|
||
|
||
function terminalBody(mode) {
|
||
const m = {
|
||
default: `<span class="prompt">$</span> deploy --target acme<br /><span class="ok">✓ 14 manual steps eliminated</span>`,
|
||
matrix: `<span class="dim">[sys]</span> initializing workflow mesh...<br /><span class="ok">>> LINK_OK</span> 14 nodes connected<br /><span class="prompt">></span> _`,
|
||
ssh: `<span class="dim">Welcome to Ubuntu 22.04 LTS</span><br /><span class="prompt">root@prod-01:~#</span> systemctl start automation<br /><span class="ok">● automation.service — active (running)</span>`,
|
||
rack: `<span class="dim">[cron]</span> job dispatcher started<br /><span class="ok">OK</span> workflow/sync — 200 — 94ms<br /><span class="dim">[health]</span> all nodes nominal`,
|
||
datacenter: `<span class="dim">dc-01 / rack A14</span><br /><span class="prompt">$</span> ./deploy.sh --env production<br /><span class="ok">✓ deploy complete — 0 errors</span>`,
|
||
root: `<span class="prompt">root@prod:~#</span> ./automate --force<br /><span class="ok">DONE</span> 14 steps replaced · exit 0`,
|
||
serial: `<span class="dim">BIOS v2.4 — serial 0x8F2A</span><br /><span class="prompt">></span> RUN AUTO_PIPELINE<br /><span class="ok">[PASS]</span> HANDOFF COMPLETE`,
|
||
syslog: `<span class="dim">Apr 19 02:14:01</span> cron[8821]: started<br /><span class="warn">Apr 19 02:14:02</span> job: lead-intake<br /><span class="ok">Apr 19 02:14:03</span> job: done (90ms)`,
|
||
k8s: `<span class="hl">kubectl apply</span> -f pipeline.yaml<br /><span class="ok">pod/automation-7d4f Running</span><br /><span class="dim">replicas: 1/1 ready</span>`,
|
||
brutal: `<span class="prompt">root@box#</span> ./patchline run<br /><span class="ok">OK</span> 14 MANUAL_STEPS → 0`,
|
||
};
|
||
return m[mode] || m.default;
|
||
}
|
||
|
||
function codeHtml() {
|
||
return `<div class="mini-code" aria-hidden="true"><span class="kw">async function</span> <span class="fn">automate</span>(client) {<br /> <span class="kw">await</span> client.<span class="fn">connect</span>(<span class="str">"crm"</span>);<br /> <span class="cm">// 14 steps → 1 pipeline</span><br />}</div>`;
|
||
}
|
||
|
||
function rackHtml() {
|
||
return `<div class="mini-rack" aria-hidden="true"><span class="on"></span><span class="on"></span><span class="on"></span><span></span><span class="on"></span><span></span><span class="on"></span><span></span></div>`;
|
||
}
|
||
|
||
function previewHtml(brand, cls, opts = {}) {
|
||
return `
|
||
<div class="preview ${cls}">
|
||
<div class="mini-header">
|
||
<span>${brand}</span>
|
||
<span class="mini-nav"><span>Services</span><span>Process</span><span>Book</span></span>
|
||
</div>
|
||
<div class="mini-hero">
|
||
<h3>Automate the boring parts of your business.</h3>
|
||
<p>Production-ready scripts, workflows, and pipelines that run while you sleep.</p>
|
||
<span class="mini-btn">Book a free call</span>
|
||
</div>
|
||
${opts.flow ? flowHtml() : ""}
|
||
${opts.time ? timeHtml(opts.time, opts.sandAnim) : ""}
|
||
${opts.terminal === "rack" ? rackHtml() : ""}
|
||
${opts.terminal === "code" ? codeHtml() : ""}
|
||
<div class="mini-terminal">${terminalBody(opts.terminal || "default")}</div>
|
||
</div>`;
|
||
}
|
||
|
||
function render() {
|
||
const batch1 = styles.filter((s) => s.id <= 10);
|
||
const batch2 = styles.filter((s) => s.id > 10 && s.id <= 20);
|
||
const batch3 = styles.filter((s) => s.id > 20 && s.id <= 30);
|
||
const batch4 = styles.filter((s) => s.id > 30);
|
||
|
||
function cards(list) {
|
||
return list.map(
|
||
(s) => `
|
||
<button type="button" class="style-card${picked === s.name ? " is-picked" : ""}" data-name="${s.name}">
|
||
${previewHtml(s.brand, s.class, { flow: s.flow, time: s.time, sandAnim: s.sandAnim, terminal: s.terminal })}
|
||
<div class="meta">
|
||
<div class="meta-head">
|
||
<h2>${s.name}</h2>
|
||
<span class="meta-num">#${s.id}</span>
|
||
</div>
|
||
<p class="meta-desc">${s.desc}</p>
|
||
<div class="tags">${s.tags.map((t) => `<span>${t}</span>`).join("")}</div>
|
||
</div>
|
||
</button>`
|
||
).join("");
|
||
}
|
||
|
||
grid.innerHTML =
|
||
`<p class="batch-label">Round 1 — general</p>` +
|
||
cards(batch1) +
|
||
`<p class="batch-label">Round 2 — automation & workflow UI</p>` +
|
||
cards(batch2) +
|
||
`<p class="batch-label">Round 3 — hourglass, time & payback</p>` +
|
||
cards(batch3) +
|
||
`<p class="batch-label">Round 4 — hacker code & server</p>` +
|
||
cards(batch4);
|
||
}
|
||
|
||
function setPick(name) {
|
||
picked = name;
|
||
localStorage.setItem("style-pick", name);
|
||
document.getElementById("pick-display").textContent = name || "none yet";
|
||
render();
|
||
}
|
||
|
||
grid.addEventListener("click", (e) => {
|
||
const card = e.target.closest(".style-card");
|
||
if (!card) return;
|
||
const name = card.dataset.name;
|
||
setPick(picked === name ? "" : name);
|
||
});
|
||
|
||
document.getElementById("clear-pick").addEventListener("click", () => setPick(""));
|
||
document.getElementById("copy-pick").addEventListener("click", () => {
|
||
if (!picked) return;
|
||
const s = styles.find((x) => x.name === picked);
|
||
navigator.clipboard?.writeText(`Style pick: ${picked}\nTags: ${s?.tags?.join(", ") || ""}\nNotes: ${s?.desc || ""}`);
|
||
});
|
||
|
||
document.getElementById("pick-display").textContent = picked || "none yet";
|
||
render();
|
||
</script>
|
||
</body>
|
||
</html>
|