/* * ServoChain landing-app stylesheet. * * Theme strategy: * - Base :root defines the LIGHT "Neutral Modern" theme (the design * system OD uses for design runs). This is what the post-login * dashboard, terminal, and login-all-of-them render with. * - The OLD dark theme lives under `body.theme-dark` (a future opt-in * for users who prefer it). Currently nothing in the templates sets * this class, so the dark block is dead code; we keep it for emergency * rollback by setting ``. * - The login page used to be light, the dashboard dark. After this * redesign, BOTH are light. The login-specific overrides are gone * (the login no longer needs to flip any variables — they already * match). */ :root { --bg: #FAFAFA; --bg-elev: #FFFFFF; --bg-elev-2: #F5F5F5; --border: #E5E5E5; --border-strong: #D4D4D4; --text: #111111; --muted: #6B6B6B; --muted-2: #9CA3AF; --accent: #2F6FEB; --accent-hover: #2563DB; --accent-active: #1D4ED8; --accent-soft: #EFF4FF; --accent-2: #22d3ee; --good: #17A34A; --good-soft: #DCFCE7; --bad: #DC2626; --bad-soft: #FEE2E2; --warn: #EAB308; --radius: 12px; --radius-sm: 8px; --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 3px rgba(17, 17, 17, 0.04); --shadow-card-hover: 0 4px 12px rgba(17, 17, 17, 0.06), 0 2px 4px rgba(17, 17, 17, 0.04); --font-sans: 'Inter', -apple-system, system-ui, sans-serif; } body.theme-dark { --bg: #0b0d12; --bg-elev: #141823; --bg-elev-2: #1b2030; --border: #262b3a; --border-strong: #343a4d; --text: #e6e8ee; --muted: #9aa3b2; --muted-2: #6B7280; --accent: #7c5cff; --accent-hover: #8b6cff; --accent-active: #6b48f5; --accent-soft: rgba(124, 92, 255, 0.18); --accent-2: #22d3ee; --good: #22c55e; --good-soft: rgba(34, 197, 94, 0.10); --bad: #ef4444; --bad-soft: rgba(239, 68, 68, 0.10); --warn: #f59e0b; --radius: 14px; --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.35); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.45); --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--font-sans); min-height: 100vh; display: flex; flex-direction: column; } /* ---------- Brand hero strip ---------- Full-bleed 1920×320 strip across the top of the page, with a ComfyUI- generated abstract image as the backdrop. A white-to-transparent overlay keeps the brand mark and headline readable on any image variant. The strip sits above the existing functional header (which still holds the user chip, sign-out button, and connection status). */ .brand-hero { position: relative; width: 100%; height: 220px; overflow: hidden; background: var(--bg-elev-2); border-bottom: 1px solid var(--border); } .brand-hero-img { position: absolute; inset: 0; background: /* Soft white wash on the left so the brand mark and text stay readable regardless of what the generated image happens to contain. */ linear-gradient(90deg, rgba(250, 250, 250, 0.92) 0%, rgba(250, 250, 250, 0.55) 35%, rgba(250, 250, 250, 0) 70%), /* Soft white fade at the bottom edge so the strip transitions cleanly into the page background. */ linear-gradient(180deg, rgba(250, 250, 250, 0) 60%, rgba(250, 250, 250, 0.5) 100%), url('/static/hero-bg.jpg') center/cover no-repeat; } .brand-hero-inner { position: relative; max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 20px; } .brand-hero-mark { width: 80px; height: 80px; flex: 0 0 80px; display: grid; place-items: center; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 2px 6px rgba(17, 17, 17, 0.05); } .brand-hero-mark svg { width: 56px; height: 56px; } .brand-hero-text { display: flex; flex-direction: column; gap: 4px; } .brand-hero-title { margin: 0; font-family: var(--font-sans); font-size: 32px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--text); } .brand-hero-tagline { margin: 0; font-family: var(--font-sans); font-size: 14px; color: var(--muted); font-weight: 400; } @media (max-width: 640px) { .brand-hero { height: 160px; } .brand-hero-mark { width: 56px; height: 56px; flex-basis: 56px; border-radius: 14px; } .brand-hero-mark svg { width: 40px; height: 40px; } .brand-hero-title { font-size: 24px; } } /* ---------- Page chrome (header / hero / footer) ---------- The header is a soft off-white strip that visually disappears against the page background; only a thin bottom border and the brand mark carry visual weight. The h1 no longer uses a text gradient — that's a dark-theme trick that washes out on light backgrounds. */ /* Slim utility header. The lower title was deleted (the brand-hero strip above is now the sole owner of "ServoChain" + tagline), so this row only carries the signed-in chip, sign-out button, and connection status. Right-aligned via hero-inner's flex. */ .hero { padding: 14px 32px 16px; border-bottom: 1px solid var(--border); background: var(--bg); } .hero-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; } /* `.brand` and `.brand-mark` rules removed — the lower logo block was deleted; the upper brand-hero strip owns that visual now. */ h1 { font-family: var(--font-sans); font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.02em; color: var(--text); line-height: 1.2; } /* (The `.tagline` rule that used to live here was removed when the duplicate "Control center for the ServoChain ecosystem" line under the H1 was deleted — the brand-hero strip is now the sole owner of that tagline, styled via .brand-hero-tagline above.) */ .hero-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); font-family: var(--font-sans); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); } .dot.dot-off { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); } /* ---------- Main + section banner ---------- */ main { flex: 1; padding: 40px 32px 64px; max-width: 1200px; margin: 0 auto; width: 100%; } .tiles-section { display: flex; flex-direction: column; gap: 20px; } .section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; } .section-title h2 { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0; } .section-title .section-meta { font-family: var(--font-sans); font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; } /* ---------- Tiles (the main act) ---------- The design target was "smaller modern tiles": - Min width 220px (was 280px) so 5-6 tiles fit on a 1440px display - Tighter internal padding (16px) and 12px radius - Subtle border + soft drop shadow; lift on hover - Icon in a 36px soft-cobalt tinted square (not a 40px purple/cyan gradient) - Title 14px semibold Inter, no letter-spacing hack - Status pill is tiny, monochrome, dot-only at the top-right corner - Footer is the start/launch button + meta, with the meta right-aligned */ .tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; /* Each tile sizes to its own content (no row-stretching), so a tile with only an Open-link is shorter than one with Start + meta. The thumb is fixed (96px), so the visual row alignment is preserved top-to-bottom; only the bottoms differ. */ align-items: start; grid-auto-rows: max-content; } .tile { position: relative; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); /* No internal padding — the thumb bleeds to the edges; the body section has its own padding. */ padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease; box-shadow: var(--shadow-card); } .tile:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-card-hover); } .tile.is-running { border-color: rgba(23, 163, 74, 0.30); } /* Top-right status dot. Sits over the thumb at its top-right corner. */ .tile::before { content: ""; position: absolute; top: 12px; right: 12px; z-index: 3; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.10); transition: background 200ms ease, box-shadow 200ms ease; } .tile.is-running::before { background: var(--good); box-shadow: 0 0 0 3px rgba(23, 163, 74, 0.35); animation: pulse 2.4s ease-in-out infinite; } /* ---------- Tile thumb (image + overlaid icon/title/accent) ---------- The thumb is the "image region". It now holds the icon, title, accent bar, AND the tagline/description text (moved up from the body so the tile height shrinks). A dark-to-transparent gradient along the lower portion keeps both the title and the explanatory text readable on any image variant. */ .tile-thumb { position: relative; width: 100%; /* Fixed height — independent of aspect ratio — so the tile body below starts at the same Y for every tile. Shorter than before (was 132px) because the descriptive text now lives inside the thumb, so the image itself can be slimmer while still holding everything. */ height: 96px; background: linear-gradient(135deg, var(--accent-soft), var(--bg-elev-2)); overflow: hidden; border-bottom: 2px solid var(--tile-color, var(--accent)); } .tile-thumb-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 400ms ease, filter 200ms ease; } .tile:hover .tile-thumb-img { transform: scale(1.04); filter: saturate(1.1); } /* The overlay is a dark gradient that ramps up earlier (because the tile-thumb-text now sits inside the upper portion of the thumb and needs a legibly dark backing). Still transparent at the very top so the image stays bright and clean. */ .tile-thumb-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.55) 100%); pointer-events: none; } /* The head sits over the bottom-left of the image, on top of the overlay */ .tile-thumb-head { position: absolute; z-index: 2; left: 14px; right: 36px; /* leave room for the status dot at top-right */ bottom: 10px; display: flex; align-items: center; gap: 10px; } /* Tile icon: small white-tinted square on the image, so it stays visible regardless of the image's dominant colour. */ .tile-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.92); display: grid; place-items: center; color: var(--tile-color, var(--accent)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); } .tile-icon svg { width: 16px; height: 16px; } .tile-titles { flex: 1; min-width: 0; } .tile-title { margin: 0; font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: #FFFFFF; /* Subtle text shadow so the title stays readable on any image even outside the gradient region. */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); /* Single-line ellipsis — if a tile title is too long, truncate rather than wrap, so the layout stays predictable. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Per-tile accent bar (sits at the bottom of the thumb) ---------- 28px × 3px bar that anchors the bottom of the image region. It IS the "line" the user described: everything above this line is in the colourful image; everything below is on a soft moonlit gray background. The colour is set by app.js via --tile-color. */ .tile-accent { display: none; /* legacy: now it's the border on .tile-thumb, not a child element */ } /* ---------- Tile body (light gray region) ---------- Now slimmer than before. The tagline + description moved up into .tile-thumb-text (above), so the body only has to host the action buttons + port meta. The background is still the soft moonlit gray — light enough to feel airy, just enough contrast against the white card to feel like a separate region. */ .tile-body { padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 6px; /* The "moony" soft gray — desaturated cool gray that sits between the white card background and the page background. */ background: #F4F5F7; /* Round only the bottom corners so it tucks under the rounded tile. */ border-bottom-left-radius: calc(var(--radius) - 1px); border-bottom-right-radius: calc(var(--radius) - 1px); } /* ---------- Tile tagline inside the thumb ---------- The tagline lives over the image so the tile itself stays compact. White text with a soft shadow keeps it readable on any image variant; the dark gradient overlay on .tile-thumb does the heavy lifting further down. The description (longer multi-sentence body) was removed on 2026-07-09 — see app.js + index.html for the matching change. */ .tile-thumb-text { position: absolute; left: 14px; right: 14px; /* Sit right above the icon-title row at the bottom of the thumb */ bottom: 38px; z-index: 2; display: flex; flex-direction: column; gap: 2px; /* Keep the tagline clear of the icon/title overlay at the bottom */ padding-right: 28px; } .tile-tagline { margin: 0; color: #FFFFFF; font-size: 12px; font-weight: 600; font-family: var(--font-sans); line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); /* Clamp to one line so the thumb stays a fixed height regardless of tagline length. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The legacy `.badge` is now hidden — its content (the dot) is rendered as the ::before pseudo-element on the .tile root. The hidden attribute in the template is a backup for browsers that don't support ::before. */ .badge { display: none; } /* The .tile-desc rule was removed on 2026-07-09 — the per-tile description block is no longer rendered (see app.js for the matching JS change). The data still flows in tile.description from the Python TILES list, but the template no longer has a `.tile-desc` element, and the JS no longer populates one. If you re-introduce descriptions later, restore the rule below. */ .tile-foot { display: flex; align-items: center; gap: 8px; /* No margin-top: auto — we want the body to hug its content (foot + any leftover flex space), not stretch to fill space. The tile- height difference within a row is absorbed by the body's natural padding, which is fine because the thumb is fixed. */ flex-wrap: wrap; padding-top: 4px; } .tile-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tile-meta { margin-left: auto; color: var(--muted-2); font-size: 11px; font-variant-numeric: tabular-nums; font-family: var(--font-sans); } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--good-soft); } 50% { box-shadow: 0 0 0 6px rgba(23, 163, 74, 0.05); } } /* ---------- Buttons (modern light) ---------- The dashboard's primary CTA is now a solid cobalt pill (no gradient — the purple→indigo gradient was dark-theme flavor). Secondary buttons are light, danger stays saturated red, warning is amber-on-light. The .btn base is the workhorse, all variants extend it. */ .btn { appearance: none; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); padding: 7px 12px; border-radius: 8px; font-family: var(--font-sans); font-weight: 500; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, color 120ms ease; } .btn[hidden] { display: none; } .btn:hover { border-color: var(--border-strong); background: var(--bg-elev-2); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; box-shadow: 0 1px 2px rgba(47, 111, 235, 0.20); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-primary:active { background: var(--accent-active); border-color: var(--accent-active); } .btn-danger { background: #DC2626; border-color: #DC2626; color: #FFFFFF; box-shadow: 0 1px 2px rgba(220, 38, 38, 0.20); } .btn-danger:hover { background: #B91C1C; border-color: #B91C1C; } .btn-warning { background: #F59E0B; border-color: #F59E0B; color: #422006; box-shadow: 0 1px 2px rgba(245, 158, 11, 0.20); } .btn-warning:hover { background: #D97706; border-color: #D97706; } .btn-warning:disabled { background: var(--bg-elev); color: var(--muted); border-color: var(--border); box-shadow: none; opacity: 1; } .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn-ghost:hover { color: var(--text); background: var(--bg-elev); border-color: transparent; } /* ---------- Page-level footer ---------- */ /* Scoped to the OUTER footer (the page-level Auto-managed by line) so it doesn't bleed into