/* ============================================================ Hermes Logios — homepage "Agent + Terminal" live section Inline, in-flow dark band appended at the bottom of the homepage scroll. Reuses the site tokens (cyan/black, Cinzel, IBM Plex Mono, hairline #2F3337) — mirrors mechanics.css. All classes are `hl-sec*` to avoid React DOM collisions. ============================================================ */ :root { --hls-bg: #101010; --hls-panel: #0c0d0e; --hls-panel-2: #242629; --hls-text: #f5f5f5; --hls-muted: #a1a6aa; --hls-cyan: var(--accent, #51dcfb); --hls-green: #55f678; --hls-warn: #f8c24f; --hls-error: #f85454; --hls-hair: #2f3337; --hls-mono: var(--font-mono, "IBM Plex Mono", monospace); --hls-display: var(--font-display, "Cinzel", serif); } /* the -level holder sits in normal flow at the very bottom */ .hl-sec-holder { display: block; } /* ---------- the section band ---------- */ .hl-sec { display: block; width: 100%; box-sizing: border-box; background: var(--hls-bg); border-top: 1px solid var(--hls-hair); /* breathing room above the fixed bottom quick-nav (~64px) */ padding: 72px 0 132px; color: var(--hls-text); position: relative; z-index: 1; /* below the fixed bars (which are 2147482000+) */ } .hl-sec__wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } /* ---------- heading band ---------- */ .hl-sec__head { margin: 0 0 36px; text-align: center; } .hl-sec__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hls-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hls-cyan); margin-bottom: 16px; } .hl-sec__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hls-cyan); box-shadow: 0 0 0 0 rgba(81, 220, 251, 0.7); animation: hl-sec-pulse 2s ease-out infinite; } @keyframes hl-sec-pulse { 0% { box-shadow: 0 0 0 0 rgba(81, 220, 251, 0.6); opacity: 1; } 70% { box-shadow: 0 0 0 7px rgba(81, 220, 251, 0); opacity: 0.7; } 100% { box-shadow: 0 0 0 0 rgba(81, 220, 251, 0); opacity: 1; } } .hl-sec__h2 { font-family: var(--hls-display); font-size: clamp(28px, 4.4vw, 48px); font-weight: 600; line-height: 1.08; letter-spacing: 0.01em; color: var(--hls-text); margin: 0 0 12px; } .hl-sec__sub { font-family: var(--hls-mono); font-size: 13px; line-height: 1.6; color: var(--hls-muted); margin: 0 auto; max-width: 520px; } /* ---------- 2-col body ---------- */ .hl-sec__body { display: grid; grid-template-columns: 58fr 42fr; gap: 24px; align-items: stretch; } .hl-sec__left, .hl-sec__right { min-width: 0; } /* ---------- LEFT: inline terminal ---------- */ .hl-sec-term { display: flex; flex-direction: column; height: 100%; min-height: 380px; background: var(--hls-panel); border: 1px solid var(--hls-hair); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(81, 220, 251, 0.06), 0 24px 60px -30px rgba(0, 0, 0, 0.9), 0 0 60px -36px rgba(81, 220, 251, 0.22); } .hl-sec-term__bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; background: var(--hls-panel-2); border-bottom: 1px solid var(--hls-hair); font-family: var(--hls-mono); } .hl-sec-term__lights { display: inline-flex; gap: 7px; align-items: center; } .hl-sec-term__light { width: 11px; height: 11px; border-radius: 50%; background: var(--hls-hair); } .hl-sec-term__light--a { background: #3a3d40; } .hl-sec-term__light--b { background: #4a4e52; } .hl-sec-term__light--c { background: var(--hls-cyan); opacity: 0.85; } .hl-sec-term__title { flex: 1 1 auto; text-align: center; color: var(--hls-muted); font-size: 12px; letter-spacing: 0.06em; font-family: var(--hls-mono); } .hl-sec-term__body { flex: 1 1 auto; height: 340px; overflow-y: auto; padding: 14px 16px 18px; background: var(--hls-panel); background-image: radial-gradient( circle at 50% 0%, rgba(81, 220, 251, 0.04), transparent 60% ); font-family: var(--hls-mono); font-size: 12.5px; line-height: 1.65; color: var(--hls-text); scrollbar-width: thin; scrollbar-color: var(--hls-hair) transparent; } .hl-sec-term__body::-webkit-scrollbar { width: 8px; } .hl-sec-term__body::-webkit-scrollbar-thumb { background: var(--hls-hair); border-radius: 4px; } .hl-sec-term__body::-webkit-scrollbar-track { background: transparent; } .hl-sec-line { white-space: pre-wrap; word-break: break-word; } .hl-sec-line--cmd { color: var(--hls-cyan); } .hl-sec-line--ok { color: var(--hls-green); } .hl-sec-line--err { color: var(--hls-error); } .hl-sec-line--warn { color: var(--hls-warn); } .hl-sec-line--muted { color: var(--hls-muted); } .hl-sec-line--add { color: var(--hls-green); } .hl-sec-line--del { color: var(--hls-error); } .hl-sec-line--info { color: var(--hls-text); } /* blinking caret on the latest line */ .hl-sec-caret::after { content: "▋"; margin-left: 2px; color: var(--hls-cyan); animation: hl-sec-blink 1s steps(1) infinite; } @keyframes hl-sec-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* ---------- RIGHT: agent card ---------- */ .hl-sec-card { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 22px 22px 20px; background: var(--hls-panel); border: 1px solid var(--hls-hair); border-radius: 10px; } .hl-sec-card__identity { font-family: var(--hls-display); font-size: 14px; line-height: 1.55; letter-spacing: 0.04em; color: var(--hls-text); margin: 0 0 18px; } .hl-sec-card__greek { color: var(--hls-cyan); letter-spacing: 0.08em; } .hl-sec-card__statusrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 16px; border-bottom: 1px solid var(--hls-hair); } /* big colour-coded status badge */ .hl-sec-badge { font-family: var(--hls-mono); font-size: 15px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 16px; border-radius: 8px; border: 1px solid currentColor; background: rgba(255, 255, 255, 0.02); } .hl-sec-badge::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 9px; vertical-align: middle; background: currentColor; box-shadow: 0 0 8px currentColor; } .hl-sec-badge.is-online { color: var(--hls-green); } .hl-sec-badge.is-working { color: var(--hls-cyan); } .hl-sec-badge.is-verify { color: var(--hls-warn); } .hl-sec-badge.is-standby { color: var(--hls-muted); } .hl-sec-badge.is-halted { color: var(--hls-error); } .hl-sec-card__field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hls-hair); } .hl-sec-card__k { font-family: var(--hls-mono); color: var(--hls-muted); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; } .hl-sec-card__v { font-family: var(--hls-mono); color: var(--hls-text); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; } .hl-sec-card__v--accent { color: var(--hls-cyan); } /* compact live stat row */ .hl-sec-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 0; } .hl-sec-stat { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px; border: 1px solid var(--hls-hair); border-radius: 8px; background: rgba(255, 255, 255, 0.015); } .hl-sec-stat__v { font-family: var(--hls-mono); font-size: 17px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: var(--hls-text); line-height: 1; } .hl-sec-stat__v--accent { color: var(--hls-cyan); } .hl-sec-stat__k { font-family: var(--hls-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hls-muted); } /* buttons */ .hl-sec-card__actions { display: flex; gap: 10px; margin-top: auto; padding-top: 20px; } .hl-sec-btn { appearance: none; -webkit-appearance: none; flex: 1 1 auto; font-family: var(--hls-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hls-cyan); background: rgba(81, 220, 251, 0.06); border: 1px solid rgba(81, 220, 251, 0.4); border-radius: 6px; padding: 11px 14px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .hl-sec-btn:hover { background: rgba(81, 220, 251, 0.14); border-color: var(--hls-cyan); } .hl-sec-btn--ghost { color: var(--hls-muted); background: transparent; border-color: var(--hls-hair); } .hl-sec-btn--ghost:hover { color: var(--hls-text); background: rgba(255, 255, 255, 0.04); border-color: var(--hls-muted); } /* ---------- reveal (own class — does NOT use the global [data-reveal] opacity:0 rule from fx.css, so content can never get stuck hidden if polish.js already ran before this section mounted) ---------- */ .hl-sec-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; } .hl-sec-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hl-sec-reveal { opacity: 1; transform: none; transition: none; } .hl-sec__dot { animation: none; } .hl-sec-caret::after { animation: none; } } /* ---------- mobile: stack ≤820px ---------- */ @media (max-width: 820px) { .hl-sec { padding: 56px 0 124px; } .hl-sec__body { grid-template-columns: 1fr; gap: 18px; } .hl-sec-term { min-height: 320px; } .hl-sec-term__body { height: 280px; font-size: 11.5px; } } @media (max-width: 480px) { .hl-sec__wrap { padding: 0 16px; } .hl-sec-stat__v { font-size: 15px; } .hl-sec-card__actions { flex-direction: column; } }