fix: misc refactors, easings
This commit is contained in:
Austin Pickett
+233
-213
@@ -153,17 +153,6 @@
|
||||
data-platform="linux"
|
||||
onclick="switchPlatform('linux')"
|
||||
>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
style="opacity: 0.7"
|
||||
>
|
||||
<path
|
||||
d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.368 1.884 1.43.39.03.8-.066 1.109-.199.69-.3 1.286-1.006 1.652-1.963.086-.235.188-.479.152-.88-.064-.406-.358-.597-.548-.899-.19-.301-.2-.335-.2-.68 0-.348.076-.664.152-.901.1-.256.233-.478.21-.783l-.003-.003c-.091-.472-.279-.861-.607-1.144-.327-.283-.762-.409-1.032-.433-.18-.04-.33-.063-.44-.143-.12-.09-.21-.29-.19-.543 .029-.272.089-.549.178-.822.188-.57.456-1.128.748-1.633.02-.044.04-.09.06-.133a.205.205 0 00.015-.04c.413-.916.64-1.866.64-2.699 0-1.039-.258-1.904-.608-2.572-.11-.188-.208-.368-.32-.527a.604.604 0 00-.038-.06c-.725-1.05-1.735-1.572-2.74-1.795a6.986 6.986 0 00-1.18-.133h-.005c-.163 0-.32.01-.478.025z"
|
||||
/>
|
||||
</svg>
|
||||
Linux / macOS / WSL
|
||||
</button>
|
||||
</div>
|
||||
@@ -397,160 +386,7 @@ hermes gateway install</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="features">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Features</h2>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Lives Where You Do</h3>
|
||||
<p>
|
||||
Telegram, Discord, Slack, WhatsApp, and CLI from a single gateway
|
||||
— start on one, pick up on another.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
|
||||
<polyline points="16 7 22 7 22 13" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Grows the Longer It Runs</h3>
|
||||
<p>
|
||||
Persistent memory and auto-generated skills — it learns your
|
||||
projects and never forgets how it solved a problem.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<polyline points="12 6 12 12 16 14" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Scheduled Automations</h3>
|
||||
<p>
|
||||
Natural language cron scheduling for reports, backups, and
|
||||
briefings — running unattended through the gateway.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="18" cy="18" r="3" />
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<path d="M6 21V9a9 9 0 0 0 9 9" />
|
||||
<path d="M18 3v12a9 9 0 0 1-9-9" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Delegates & Parallelizes</h3>
|
||||
<p>
|
||||
Isolated subagents with their own conversations, terminals, and
|
||||
Python RPC scripts for zero-context-cost pipelines.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Real Sandboxing</h3>
|
||||
<p>
|
||||
Five backends — local, Docker, SSH, Singularity, Modal — with
|
||||
container hardening and namespace isolation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="2" y1="12" x2="22" y2="12" />
|
||||
<path
|
||||
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Full Web & Browser Control</h3>
|
||||
<p>
|
||||
Web search, browser automation, vision, image generation,
|
||||
text-to-speech, and multi-model reasoning.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Terminal Demo -->
|
||||
<section class="section section-demo" id="demo">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
@@ -571,69 +407,253 @@ hermes gateway install</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-specs" id="specs">
|
||||
<!-- Features + Specs -->
|
||||
<section class="section" id="features">
|
||||
<div class="container">
|
||||
<div class="specs-list">
|
||||
<div class="spec-row">
|
||||
<h3 class="spec-label">Tools</h3>
|
||||
<p class="spec-value">
|
||||
40+ built-in — web search, terminal, file system, browser
|
||||
automation, vision, image generation, text-to-speech, code
|
||||
execution, subagent delegation, memory, task planning, cron
|
||||
scheduling, multi-model reasoning, and more.
|
||||
<div class="section-header">
|
||||
<h2>Features</h2>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-header">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Lives Where You Do</h3>
|
||||
</div>
|
||||
<p>
|
||||
Telegram, Discord, Slack, WhatsApp, and CLI from a single gateway
|
||||
— start on one, pick up on another.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<h3 class="spec-label">Platforms</h3>
|
||||
<p class="spec-value">
|
||||
Telegram, Discord, Slack, WhatsApp, Signal, Email, and CLI — all
|
||||
from a single gateway. Connect to
|
||||
<a
|
||||
href="https://portal.nousresearch.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Nous Portal</a
|
||||
>, OpenRouter, or any OpenAI-compatible API.
|
||||
<div class="feature-card">
|
||||
<div class="feature-header">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
|
||||
<polyline points="16 7 22 7 22 13" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Grows the Longer It Runs</h3>
|
||||
</div>
|
||||
<p>
|
||||
Persistent memory and auto-generated skills — it learns your
|
||||
projects and never forgets how it solved a problem.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<h3 class="spec-label">Environments</h3>
|
||||
<p class="spec-value">
|
||||
Run locally, in Docker, over SSH, on Modal, Daytona, or
|
||||
Singularity. Container hardening with read-only root, dropped
|
||||
capabilities, and namespace isolation.
|
||||
<div class="feature-card">
|
||||
<div class="feature-header">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<polyline points="12 6 12 12 16 14" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Scheduled Automations</h3>
|
||||
</div>
|
||||
<p>
|
||||
Natural language cron scheduling for reports, backups, and
|
||||
briefings — running unattended through the gateway.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<h3 class="spec-label">Skills</h3>
|
||||
<p class="spec-value">
|
||||
40+ bundled skills covering MLOps, GitHub workflows, research, and
|
||||
more. The agent creates new skills on the fly and shares them via
|
||||
the open
|
||||
<a href="https://agentskills.io" target="_blank" rel="noopener"
|
||||
>agentskills.io</a
|
||||
>
|
||||
format. Install community skills from
|
||||
<a href="https://clawhub.ai" target="_blank" rel="noopener"
|
||||
>ClawHub</a
|
||||
>,
|
||||
<a href="https://lobehub.com" target="_blank" rel="noopener"
|
||||
>LobeHub</a
|
||||
>, and GitHub.
|
||||
<div class="feature-card">
|
||||
<div class="feature-header">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="18" cy="18" r="3" />
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<path d="M6 21V9a9 9 0 0 0 9 9" />
|
||||
<path d="M18 3v12a9 9 0 0 1-9-9" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Delegates & Parallelizes</h3>
|
||||
</div>
|
||||
<p>
|
||||
Isolated subagents with their own conversations, terminals, and
|
||||
Python RPC scripts for zero-context-cost pipelines.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<h3 class="spec-label">Research</h3>
|
||||
<p class="spec-value">
|
||||
Batch trajectory generation with parallel workers and
|
||||
checkpointing. Atropos integration for RL training. Export to
|
||||
ShareGPT for fine-tuning with trajectory compression.
|
||||
<div class="feature-card">
|
||||
<div class="feature-header">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Real Sandboxing</h3>
|
||||
</div>
|
||||
<p>
|
||||
Five backends — local, Docker, SSH, Singularity, Modal — with
|
||||
container hardening and namespace isolation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-header">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="2" y1="12" x2="22" y2="12" />
|
||||
<path
|
||||
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Full Web & Browser Control</h3>
|
||||
</div>
|
||||
<p>
|
||||
Web search, browser automation, vision, image generation,
|
||||
text-to-speech, and multi-model reasoning.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="features-more">
|
||||
<button class="more-toggle" onclick="toggleSpecs()" id="specs-toggle">
|
||||
<span class="toggle-label">More details</span>
|
||||
<svg
|
||||
class="more-chevron"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="specs-wrapper" id="specs-wrapper">
|
||||
<div class="specs-list">
|
||||
<div class="spec-row">
|
||||
<h3 class="spec-label">Tools</h3>
|
||||
<p class="spec-value">
|
||||
40+ built-in — web search, terminal, file system, browser
|
||||
automation, vision, image generation, text-to-speech, code
|
||||
execution, subagent delegation, memory, task planning, cron
|
||||
scheduling, multi-model reasoning, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<h3 class="spec-label">Platforms</h3>
|
||||
<p class="spec-value">
|
||||
Telegram, Discord, Slack, WhatsApp, Signal, Email, and CLI — all
|
||||
from a single gateway. Connect to
|
||||
<a
|
||||
href="https://portal.nousresearch.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Nous Portal</a
|
||||
>, OpenRouter, or any OpenAI-compatible API.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<h3 class="spec-label">Environments</h3>
|
||||
<p class="spec-value">
|
||||
Run locally, in Docker, over SSH, on Modal, Daytona, or
|
||||
Singularity. Container hardening with read-only root, dropped
|
||||
capabilities, and namespace isolation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<h3 class="spec-label">Skills</h3>
|
||||
<p class="spec-value">
|
||||
40+ bundled skills covering MLOps, GitHub workflows, research,
|
||||
and more. The agent creates new skills on the fly and shares
|
||||
them via the open
|
||||
<a href="https://agentskills.io" target="_blank" rel="noopener"
|
||||
>agentskills.io</a
|
||||
>
|
||||
format. Install community skills from
|
||||
<a href="https://clawhub.ai" target="_blank" rel="noopener"
|
||||
>ClawHub</a
|
||||
>,
|
||||
<a href="https://lobehub.com" target="_blank" rel="noopener"
|
||||
>LobeHub</a
|
||||
>, and GitHub.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<h3 class="spec-label">Research</h3>
|
||||
<p class="spec-value">
|
||||
Batch trajectory generation with parallel workers and
|
||||
checkpointing. Atropos integration for RL training. Export to
|
||||
ShareGPT for fine-tuning with trajectory compression.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
+32
-1
@@ -62,6 +62,37 @@ function toggleMobileNav() {
|
||||
document.getElementById("nav-mobile").classList.toggle("open");
|
||||
}
|
||||
|
||||
function toggleSpecs() {
|
||||
const wrapper = document.getElementById("specs-wrapper");
|
||||
const btn = document.getElementById("specs-toggle");
|
||||
const label = btn.querySelector(".toggle-label");
|
||||
const isOpen = wrapper.classList.contains("open");
|
||||
|
||||
if (isOpen) {
|
||||
wrapper.style.maxHeight = wrapper.scrollHeight + "px";
|
||||
requestAnimationFrame(() => {
|
||||
wrapper.style.maxHeight = "0";
|
||||
});
|
||||
wrapper.classList.remove("open");
|
||||
btn.classList.remove("open");
|
||||
if (label) label.textContent = "More details";
|
||||
} else {
|
||||
wrapper.classList.add("open");
|
||||
wrapper.style.maxHeight = wrapper.scrollHeight + "px";
|
||||
btn.classList.add("open");
|
||||
if (label) label.textContent = "Less";
|
||||
wrapper.addEventListener(
|
||||
"transitionend",
|
||||
() => {
|
||||
if (wrapper.classList.contains("open")) {
|
||||
wrapper.style.maxHeight = "none";
|
||||
}
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// --- Copy to clipboard ---
|
||||
function copyInstall() {
|
||||
const text = document.getElementById("install-command").textContent;
|
||||
@@ -93,7 +124,7 @@ function copyText(btn) {
|
||||
// --- Scroll-triggered fade-in ---
|
||||
function initScrollAnimations() {
|
||||
const elements = document.querySelectorAll(
|
||||
".feature-card, .spec-row, .install-step, " +
|
||||
".feature-card, .install-step, " +
|
||||
".section-header, .terminal-window",
|
||||
);
|
||||
|
||||
|
||||
+93
-17
@@ -28,6 +28,27 @@
|
||||
--container: 1080px;
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
|
||||
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
|
||||
--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
|
||||
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
|
||||
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
|
||||
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
|
||||
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
|
||||
|
||||
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
|
||||
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
|
||||
--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
|
||||
--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
|
||||
--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
|
||||
--ease-out-circ: cubic-bezier(.075, .82, .165, 1);
|
||||
|
||||
--ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
|
||||
--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
|
||||
--ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
|
||||
--ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
|
||||
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
|
||||
--ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -52,7 +73,7 @@ body {
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
transition: color 0.2s var(--ease-out-quad);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--primary-light);
|
||||
@@ -137,6 +158,7 @@ strong {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
transition: color 0.2s var(--ease-out-quad);
|
||||
}
|
||||
.nav-logo:hover { color: var(--primary-light); }
|
||||
|
||||
@@ -165,7 +187,7 @@ strong {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: color 0.2s;
|
||||
transition: color 0.2s var(--ease-out-quad);
|
||||
}
|
||||
.nav-links a:hover { color: #fff; }
|
||||
|
||||
@@ -205,6 +227,7 @@ strong {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
padding: 4px 0;
|
||||
transition: color 0.2s var(--ease-out-quad);
|
||||
}
|
||||
|
||||
.nav-mobile a:hover {
|
||||
@@ -265,7 +288,7 @@ strong {
|
||||
text-align: center;
|
||||
text-shadow: 0 0 20px rgba(48, 80, 255, 0.3);
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.3s;
|
||||
transition: opacity 0.3s var(--ease-out-cubic);
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
@@ -310,7 +333,7 @@ strong {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
transition: border-color 0.3s;
|
||||
transition: border-color 0.3s var(--ease-out-quad);
|
||||
}
|
||||
|
||||
.install-widget:hover {
|
||||
@@ -355,7 +378,7 @@ strong {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: color 0.2s var(--ease-out-quad), background 0.2s var(--ease-out-quad);
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -398,7 +421,7 @@ strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
transition: opacity 0.15s;
|
||||
transition: opacity 0.15s var(--ease-out-quad);
|
||||
}
|
||||
|
||||
/* --- Code block tabs (install step section) --- */
|
||||
@@ -415,7 +438,7 @@ strong {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: color 0.2s var(--ease-out-quad), background 0.2s var(--ease-out-quad);
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -443,7 +466,7 @@ strong {
|
||||
border-radius: 6px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12px;
|
||||
transition: all 0.2s;
|
||||
transition: color 0.2s var(--ease-out-quad), background 0.2s var(--ease-out-quad);
|
||||
}
|
||||
.copy-btn:hover {
|
||||
color: var(--primary-light);
|
||||
@@ -471,7 +494,7 @@ strong {
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
font-weight: 550;
|
||||
transition: all 0.25s;
|
||||
transition: background 0.25s var(--ease-out-quint), border-color 0.25s var(--ease-out-quad), color 0.2s var(--ease-out-quad), transform 0.25s var(--ease-out-quint);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@@ -530,7 +553,7 @@ strong {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
transition: all 0.3s;
|
||||
transition: border-color 0.3s var(--ease-out-quad), background 0.3s var(--ease-out-quad), transform 0.3s var(--ease-out-quint);
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
@@ -539,17 +562,23 @@ strong {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.feature-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
margin-bottom: 16px;
|
||||
color: var(--primary-light);
|
||||
opacity: 0.85;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
@@ -562,6 +591,8 @@ strong {
|
||||
/* --- Terminal Demo --- */
|
||||
.section-demo {
|
||||
padding-bottom: 60px;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.terminal-window {
|
||||
@@ -635,14 +666,59 @@ strong {
|
||||
.t-highlight { color: #90B0FF; }
|
||||
.t-tool { color: var(--text-muted); }
|
||||
|
||||
/* --- Specs Toggle --- */
|
||||
.features-more {
|
||||
text-align: center;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.more-toggle {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: color 0.2s var(--ease-out-quad), border-color 0.2s var(--ease-out-quad);
|
||||
}
|
||||
|
||||
.more-toggle:hover {
|
||||
color: var(--primary-light);
|
||||
border-color: var(--primary-light);
|
||||
}
|
||||
|
||||
.more-chevron {
|
||||
transition: transform 0.3s var(--ease-in-out-cubic);
|
||||
}
|
||||
|
||||
.more-toggle.open .more-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.specs-wrapper {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s var(--ease-out-quart), opacity 0.3s var(--ease-out-quad);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.specs-wrapper.open {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* --- Specs --- */
|
||||
.section-specs {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.specs-list {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.spec-row {
|
||||
@@ -673,7 +749,7 @@ strong {
|
||||
.spec-value a {
|
||||
color: var(--text);
|
||||
border-bottom: 1px solid var(--border-hover);
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
transition: border-color 0.2s var(--ease-out-quad), color 0.2s var(--ease-out-quad);
|
||||
}
|
||||
|
||||
.spec-value a:hover {
|
||||
@@ -807,7 +883,7 @@ strong {
|
||||
|
||||
.footer-copy a {
|
||||
color: var(--text-dim);
|
||||
transition: color 0.2s;
|
||||
transition: color 0.2s var(--ease-out-quad);
|
||||
}
|
||||
|
||||
.footer-copy a:hover {
|
||||
@@ -818,7 +894,7 @@ strong {
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
transition: opacity 0.6s var(--ease-out-quart), transform 0.6s var(--ease-out-quart);
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
|
||||
Reference in New Issue
Block a user