@@ -3,10 +3,10 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Matcha Client</title>
- <link
- rel="stylesheet"
- href="https://www.nerdfonts.com/assets/css/webfont.css"
+ <title>Matcha - Terminal Email Client</title>
+ <meta
+ name="description"
+ content="A beautiful, keyboard-driven terminal email client written in Go. Manage your inbox without ever leaving the command line."
/>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -19,7 +19,9 @@
<link rel="me" href="https://fosstodon.org/@floatpane" />
</head>
<body>
- <div class="gradient-bg"></div>
+ <div class="noise"></div>
+ <div class="gradient-orb orb-1"></div>
+ <div class="gradient-orb orb-2"></div>
<header>
<nav>
@@ -28,23 +30,25 @@
src="assets/logo-transparent.png"
alt="Matcha"
class="logo-icon"
- width="24"
- height="24"
+ width="28"
+ height="28"
/>
<span class="logo-text">Matcha</span>
</a>
<div class="nav-links">
<a href="#features">Features</a>
<a href="#installation">Install</a>
- <a href="#usage">Usage</a>
+ <a href="https://docs.matcha.floatpane.com" target="_blank"
+ >Docs</a
+ >
<a
href="https://github.com/floatpane/matcha"
target="_blank"
- class="github-link"
+ class="nav-btn"
>
<svg
- height="20"
- width="20"
+ height="18"
+ width="18"
viewBox="0 0 16 16"
fill="currentColor"
>
@@ -52,224 +56,426 @@
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
/>
</svg>
- GitHub
+ Star on GitHub
</a>
</div>
</nav>
</header>
<main>
- <!-- Hero Section -->
<section class="hero">
- <div class="hero-badges">
- <span class="badge">MIT License</span>
- <span class="badge">macOS & Linux</span>
- <span class="badge">Written in Go</span>
+ <div class="hero-badge">
+ <span class="hero-badge-dot"></span>
+ Open Source · MIT Licensed
</div>
<h1 class="hero-title">
- The Ultimate<br />
- <span class="gradient-text">Terminal Email Client.</span>
+ Email belongs in<br />
+ <span class="gradient-text">your terminal.</span>
</h1>
<p class="hero-subtitle">
- Never leave your command line to check your inbox or send an
- email again. A beautiful TUI for power users who live in the
- terminal.
+ Matcha is a fast, keyboard-driven email client that lives in
+ your terminal. Built with Go and designed for developers who
+ never want to leave the command line.
</p>
- <div class="hero-cta">
+ <div class="hero-actions">
<a href="#installation" class="btn btn-primary">
- <span class="btn-icon">⬇</span>
- Download Now
+ Get Started
+ <svg
+ width="16"
+ height="16"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path d="M5 12h14" />
+ <path d="m12 5 7 7-7 7" />
+ </svg>
</a>
<a
href="https://github.com/floatpane/matcha"
target="_blank"
- class="btn btn-secondary"
+ class="btn btn-ghost"
>
- View on GitHub
+ <svg
+ height="18"
+ width="18"
+ viewBox="0 0 16 16"
+ fill="currentColor"
+ >
+ <path
+ d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25z"
+ />
+ </svg>
+ Star on GitHub
+ </a>
+ <a
+ href="https://docs.matcha.floatpane.com"
+ target="_blank"
+ class="btn btn-ghost"
+ >
+ <svg
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path
+ d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"
+ />
+ <path
+ d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
+ />
+ </svg>
+ Documentation
</a>
</div>
- </section>
- <!-- Terminal Preview Section -->
- <section class="preview" id="preview">
- <h2 class="section-title">Live Preview</h2>
-
- <div class="terminal-window">
- <div class="terminal-header">
- <div class="terminal-buttons">
- <span class="terminal-btn red"></span>
- <span class="terminal-btn yellow"></span>
- <span class="terminal-btn green"></span>
+ <div class="hero-terminal">
+ <div class="terminal-chrome">
+ <div class="terminal-dots">
+ <span></span><span></span><span></span>
+ </div>
+ <span class="terminal-title">matcha</span>
+ <div class="terminal-dots" style="visibility: hidden">
+ <span></span><span></span><span></span>
</div>
- <span class="terminal-title">matcha — zsh</span>
</div>
<div class="terminal-body">
- <pre class="tui-ascii-logo">
- __ __
- __ _ ___ _/ /_____/ / ___ _
- / ' \/ _ `/ __/ __/ _ \/ _ `/
-/_/_/_/\_,_/\__/\__/_//_/\_,_/</pre
- >
- <div class="tui-prompt">What would you like to do?</div>
- <div class="tui-menu">
- <div class="tui-menu-item active">
- <span class="tui-cursor">></span>
- <span class="tui-option selected"
- ><i class="nf nf-cod-mail"></i> Inbox</span
- >
- </div>
- <div class="tui-menu-item">
- <span class="tui-cursor-space"></span>
- <span class="tui-option"
- ><i class="nf nf-cod-mail_read"></i> Compose
- Email</span
- >
- </div>
- <div class="tui-menu-item">
- <span class="tui-cursor-space"></span>
- <span class="tui-option"
- ><i class="nf nf-fa-send"></i> Sent</span
- >
- </div>
- <div class="tui-menu-item">
- <span class="tui-cursor-space"></span>
- <span class="tui-option"
- ><i class="nf nf-cod-comment_draft"></i>
- Drafts</span
- >
- </div>
- <div class="tui-menu-item">
- <span class="tui-cursor-space"></span>
- <span class="tui-option"
- ><i class="nf nf-fa-gear"></i>
- Settings</span
- >
- </div>
- <div class="tui-menu-item">
- <span class="tui-cursor-space"></span>
- <span class="tui-option"
- ><i class="nf nf-cod-trash"></i> Trash &
- Archive</span
- >
- </div>
- </div>
- <div class="tui-hint">
- Use <span class="tui-key">↑/↓</span> to navigate,
- enter to select, and
- <span class="tui-key">ctrl+c</span> to quit.
+ <div class="terminal-line">
+ <span class="t-prompt">~</span>
+ <span class="t-cmd">$</span>
+ <span class="t-text typing-anim">matcha</span>
+ <span class="cursor">|</span>
</div>
+ <div
+ class="terminal-content"
+ id="terminal-content"
+ ></div>
+ </div>
+ </div>
+ </section>
+
+ <section class="logos-strip">
+ <div class="strip-items">
+ <div class="strip-item">
+ <svg
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ >
+ <path
+ d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+ />
+ <polyline points="22,6 12,13 2,6" />
+ </svg>
+ Gmail
+ </div>
+ <div class="strip-divider"></div>
+ <div class="strip-item">
+ <svg
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ >
+ <path
+ d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"
+ />
+ </svg>
+ iCloud
+ </div>
+ <div class="strip-divider"></div>
+ <div class="strip-item">
+ <svg
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ >
+ <circle cx="12" cy="12" r="3" />
+ <path
+ d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+ />
+ </svg>
+ Custom IMAP
+ </div>
+ <div class="strip-divider"></div>
+ <div class="strip-item">
+ <span class="strip-tag">Go</span>
+ Written in Go
+ </div>
+ <div class="strip-divider"></div>
+ <div class="strip-item">
+ <span class="strip-tag">MIT</span>
+ Open Source
</div>
</div>
</section>
- <!-- Features Section -->
<section class="features" id="features">
- <h2 class="section-title">Features</h2>
+ <div class="section-header">
+ <span class="section-label">Features</span>
+ <h2 class="section-title">
+ Everything you need.<br /><span class="text-muted"
+ >Nothing you don't.</span
+ >
+ </h2>
+ </div>
<div class="features-grid">
- <div class="feature-card">
- <div class="feature-icon">📬</div>
- <h3>View Your Inbox</h3>
- <p>
- Fetches and displays a list of your most recent
- emails with beautiful formatting and quick
- navigation.
- </p>
- </div>
-
- <div class="feature-card">
- <div class="feature-icon">📖</div>
- <h3>Read Emails</h3>
+ <div class="feature-card feature-highlight">
+ <div class="feature-icon-wrap">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <rect
+ x="2"
+ y="4"
+ width="20"
+ height="16"
+ rx="2"
+ />
+ <path
+ d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"
+ />
+ </svg>
+ </div>
+ <h3>Full Inbox Management</h3>
<p>
- Select an email from your inbox to view its full
- content with proper text rendering and attachments.
+ Read, compose, reply, and manage your emails
+ entirely from the terminal. Beautiful formatting,
+ attachment support, and lightning-fast navigation.
</p>
</div>
<div class="feature-card">
- <div class="feature-icon">✍️</div>
+ <div class="feature-icon-wrap">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path d="M12 20h9" />
+ <path
+ d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"
+ />
+ </svg>
+ </div>
<h3>Compose & Send</h3>
<p>
- A simple and intuitive interface for writing and
- sending new emails without leaving your terminal.
+ Intuitive compose interface with tab-based field
+ navigation. Write and send emails without touching a
+ browser.
</p>
</div>
<div class="feature-card">
- <div class="feature-icon">🎨</div>
- <h3>Beautiful TUI</h3>
+ <div class="feature-icon-wrap">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path
+ d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"
+ />
+ <circle cx="9" cy="7" r="4" />
+ <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+ <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+ </svg>
+ </div>
+ <h3>Multiple Accounts</h3>
<p>
- A clean and modern terminal user interface built
- with Bubble Tea that's a pleasure to use.
+ Manage all your email accounts in one place. Switch
+ between them seamlessly.
</p>
</div>
<div class="feature-card">
- <div class="feature-icon">🔐</div>
- <h3>Secure</h3>
+ <div class="feature-icon-wrap">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path d="m18 16 4-4-4-4" />
+ <path d="m6 8-4 4 4 4" />
+ <path d="m14.5 4-5 16" />
+ </svg>
+ </div>
+ <h3>Keyboard-First</h3>
<p>
- Uses a local configuration file to store your
- credentials securely. Your data never leaves your
- machine.
+ Vim-inspired keybindings. Navigate, select, and
+ manage everything without ever touching the mouse.
</p>
</div>
<div class="feature-card">
- <div class="feature-icon">⌨️</div>
- <h3>Keyboard Driven</h3>
+ <div class="feature-icon-wrap">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />
+ </svg>
+ </div>
+ <h3>Blazing Fast</h3>
<p>
- Navigate, select, and manage your emails entirely
- with keyboard shortcuts. No mouse required.
+ Local email caching means instant load times. No
+ Electron, no bloat -- just pure terminal speed.
</p>
</div>
<div class="feature-card">
- <div class="feature-icon">👥</div>
- <h3>Multiple Accounts</h3>
+ <div class="feature-icon-wrap">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <rect
+ width="18"
+ height="11"
+ x="3"
+ y="11"
+ rx="2"
+ ry="2"
+ />
+ <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+ </svg>
+ </div>
+ <h3>Private & Secure</h3>
<p>
- Manage multiple email accounts in one place. Switch
- between accounts seamlessly without leaving your
- terminal.
+ Your credentials stay on your machine. No telemetry,
+ no tracking, no cloud middleman.
</p>
</div>
<div class="feature-card">
- <div class="feature-icon">📇</div>
+ <div class="feature-icon-wrap">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path
+ d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+ />
+ <circle cx="9" cy="7" r="4" />
+ <line x1="19" x2="19" y1="8" y2="14" />
+ <line x1="22" x2="16" y1="11" y2="11" />
+ </svg>
+ </div>
<h3>Contacts</h3>
<p>
- Save and manage your contacts locally. Quickly
- compose emails to your saved contacts with
- auto-complete support.
+ Save and manage contacts locally with auto-complete
+ support when composing.
</p>
</div>
<div class="feature-card">
- <div class="feature-icon">⚡</div>
- <h3>Email Caching</h3>
+ <div class="feature-icon-wrap">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <rect
+ width="18"
+ height="18"
+ x="3"
+ y="3"
+ rx="2"
+ />
+ <path d="M3 9h18" />
+ <path d="M9 21V9" />
+ </svg>
+ </div>
+ <h3>Beautiful TUI</h3>
<p>
- Emails are cached locally for faster access. Enjoy
- instant load times.
+ Built with Bubble Tea. A clean, modern interface
+ that makes terminal email a pleasure.
</p>
</div>
</div>
</section>
- <!-- Installation Section -->
<section class="installation" id="installation">
- <h2 class="section-title">Installation</h2>
+ <div class="section-header">
+ <span class="section-label">Get Started</span>
+ <h2 class="section-title">
+ Up and running<br /><span class="text-muted"
+ >in seconds.</span
+ >
+ </h2>
+ </div>
- <div class="install-methods">
- <div class="install-method">
- <div class="install-header">
- <h3>Install with Homebrew</h3>
- <span class="install-badge recommended"
- >Recommended</span
- >
+ <div class="install-grid">
+ <div class="install-card primary-install">
+ <div class="install-card-header">
+ <h3>Homebrew</h3>
+ <span class="recommended-badge">Recommended</span>
</div>
-
<div class="code-block">
<div class="code-header">
<span>Terminal</span>
@@ -277,298 +483,187 @@
class="copy-btn"
onclick="copyCode(this)"
>
- Copy All
+ <svg
+ width="14"
+ height="14"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <rect
+ width="14"
+ height="14"
+ x="8"
+ y="8"
+ rx="2"
+ ry="2"
+ />
+ <path
+ d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+ />
+ </svg>
+ Copy
</button>
</div>
<div class="code-body">
<div class="code-line">
- <span class="prompt">~</span>
- <span class="command">$</span>
- <span class="code-text"
- >brew tap floatpane/matcha</span
- >
- </div>
- <div class="code-line">
- <span class="prompt">~</span>
- <span class="command">$</span>
- <span class="code-text"
+ <span class="line-prompt">$</span
+ ><span class="code-text"
>brew install
floatpane/matcha/matcha</span
>
</div>
<div class="code-line">
- <span class="prompt">~</span>
- <span class="command">$</span>
- <span class="code-text">matcha</span>
+ <span class="line-prompt">$</span
+ ><span class="code-text">matcha</span>
</div>
</div>
</div>
</div>
- <div class="install-method">
- <h3>Or, Build from Source</h3>
-
- <div class="install-steps">
- <div class="install-step">
- <div class="step-number">1</div>
- <div class="step-content">
- <h4>Clone the Repository</h4>
- <p>
- Grab the source code from GitHub. Make
- sure you have Go installed.
- </p>
- <div class="code-block small">
- <div class="code-body">
- <div class="code-line">
- <span class="code-text"
- >git clone
- https://github.com/floatpane/matcha.git</span
- >
- </div>
- </div>
- </div>
- </div>
+ <div class="install-card">
+ <h3>Build from Source</h3>
+ <div class="code-block">
+ <div class="code-header">
+ <span>Terminal</span>
+ <button
+ class="copy-btn"
+ onclick="copyCode(this)"
+ >
+ <svg
+ width="14"
+ height="14"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <rect
+ width="14"
+ height="14"
+ x="8"
+ y="8"
+ rx="2"
+ ry="2"
+ />
+ <path
+ d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+ />
+ </svg>
+ Copy
+ </button>
</div>
-
- <div class="install-step">
- <div class="step-number">2</div>
- <div class="step-content">
- <h4>Build the Binary</h4>
- <p>
- Navigate to the project folder and
- compile.
- </p>
- <div class="code-block small">
- <div class="code-body">
- <div class="code-line">
- <span class="code-text"
- >cd matcha && go build -o
- matcha</span
- >
- </div>
- </div>
- </div>
+ <div class="code-body">
+ <div class="code-line">
+ <span class="line-prompt">$</span
+ ><span class="code-text"
+ >git clone
+ https://github.com/floatpane/matcha.git</span
+ >
</div>
- </div>
-
- <div class="install-step">
- <div class="step-number">3</div>
- <div class="step-content">
- <h4>Run It</h4>
- <p>
- Execute the binary or move it to your
- PATH for global access.
- </p>
- <div class="code-block small">
- <div class="code-body">
- <div class="code-line">
- <span class="code-text"
- >./matcha</span
- >
- </div>
- </div>
- </div>
+ <div class="code-line">
+ <span class="line-prompt">$</span
+ ><span class="code-text"
+ >cd matcha && make build</span
+ >
+ </div>
+ <div class="code-line">
+ <span class="line-prompt">$</span
+ ><span class="code-text">matcha</span>
</div>
</div>
</div>
</div>
</div>
- </section>
-
- <!-- Usage Section -->
- <section class="usage" id="usage">
- <h2 class="section-title">Usage</h2>
-
- <div class="usage-grid">
- <div class="usage-card">
- <div class="usage-keys">
- <kbd>↑</kbd><kbd>↓</kbd>
- <span class="or">or</span>
- <kbd>k</kbd><kbd>j</kbd>
- </div>
- <h4>Navigate</h4>
- <p>Move through menus and email lists</p>
- </div>
-
- <div class="usage-card">
- <div class="usage-keys">
- <kbd>Enter</kbd>
- </div>
- <h4>Select</h4>
- <p>Open emails or confirm actions</p>
- </div>
-
- <div class="usage-card">
- <div class="usage-keys">
- <kbd>c</kbd>
- </div>
- <h4>Compose</h4>
- <p>Start writing a new email</p>
- </div>
-
- <div class="usage-card">
- <div class="usage-keys">
- <kbd>Tab</kbd>
- </div>
- <h4>Switch Fields</h4>
- <p>Move between To, Subject, and Body</p>
- </div>
-
- <div class="usage-card">
- <div class="usage-keys">
- <kbd>Esc</kbd>
- </div>
- <h4>Go Back</h4>
- <p>Return to the previous view</p>
- </div>
-
- <div class="usage-card">
- <div class="usage-keys">
- <kbd>Ctrl</kbd><span class="plus">+</span
- ><kbd>C</kbd>
- </div>
- <h4>Quit</h4>
- <p>Exit the application</p>
- </div>
- </div>
- <div class="providers">
- <h3>Supported Providers</h3>
- <div class="provider-list">
- <div class="provider">
- <span class="provider-icon">
- <svg
- width="20"
- height="20"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- >
- <path
- d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
- ></path>
- <polyline
- points="22,6 12,13 2,6"
- ></polyline>
- </svg>
- </span>
- <span>Gmail</span>
- </div>
- <div class="provider">
- <span class="provider-icon">
- <svg
- width="20"
- height="20"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- >
- <path
- d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"
- ></path>
- </svg>
- </span>
- <span>iCloud</span>
- </div>
- <div class="provider">
- <span class="provider-icon">
- <svg
- width="20"
- height="20"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- >
- <circle cx="12" cy="12" r="3"></circle>
- <path
- d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
- ></path>
- </svg>
- </span>
- <span>Custom</span>
- </div>
- </div>
- </div>
+ <p class="install-docs-hint">
+ Need help setting up? Check the
+ <a href="https://docs.matcha.floatpane.com" target="_blank"
+ >documentation</a
+ >
+ for detailed guides.
+ </p>
</section>
- <!-- Contact Section -->
- <section class="contact" id="contact">
- <div class="contact-content">
- <h2>Get in Touch</h2>
+ <section class="cta-section">
+ <div class="cta-card">
+ <h2>Ready to ditch the browser<br />for your email?</h2>
<p>
- Made with ❤️ by
- <a href="https://floatpane.com" target="_blank"
- >floatpane</a
- >
- </p>
- <p>
- For support, please open an issue on the
- <a
- href="https://github.com/floatpane/matcha/issues"
- target="_blank"
- >GitHub repository</a
- >.
+ Join developers who manage their inbox from the
+ terminal. Star the project to show your support and stay
+ updated.
</p>
-
- <div class="support-links">
+ <div class="cta-actions">
<a
- href="https://patreon.com/andrinoff"
+ href="https://github.com/floatpane/matcha"
target="_blank"
- class="support-link"
+ class="btn btn-primary btn-lg"
>
- <span>❤️</span> Support on Patreon
+ <svg
+ height="20"
+ width="20"
+ viewBox="0 0 16 16"
+ fill="currentColor"
+ >
+ <path
+ d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25z"
+ />
+ </svg>
+ Star on GitHub
</a>
<a
- href="https://ko-fi.com/andrinoff"
+ href="https://docs.matcha.floatpane.com"
target="_blank"
- class="support-link"
+ class="btn btn-ghost btn-lg"
>
- <span>☕</span> Buy us a coffee
+ Read the Docs
</a>
</div>
+ <div class="cta-links">
+ <a href="https://andrinoff.com/sponsor" target="_blank"
+ >Support the developer</a
+ >
</div>
</section>
</main>
<footer>
<div class="footer-content">
- <div class="footer-brand">
- <img
- src="assets/logo-transparent.png"
- alt="Matcha"
- class="logo-icon"
- width="24"
- height="24"
- />
- <span>Matcha</span>
+ <div class="footer-left">
+ <div class="footer-brand">
+ <img
+ src="assets/logo-transparent.png"
+ alt="Matcha"
+ class="logo-icon"
+ width="20"
+ height="20"
+ />
+ <span>Matcha</span>
+ </div>
+ <p class="footer-copyright">
+ © 2026 floatpane. MIT Licensed.
+ </p>
</div>
- <div class="footer-links">
- <a
- href="https://github.com/floatpane/matcha/blob/master/LICENSE"
- target="_blank"
- >MIT License</a
+ <div class="footer-right">
+ <a href="https://docs.matcha.floatpane.com" target="_blank"
+ >Docs</a
>
<a
- href="https://github.com/floatpane/matcha/blob/master/CODE_OF_CONDUCT.md"
+ href="https://github.com/floatpane/matcha"
target="_blank"
- >Code of Conduct</a
+ >GitHub</a
>
<a
- href="https://github.com/floatpane/matcha"
+ href="https://github.com/floatpane/matcha/blob/master/LICENSE"
target="_blank"
- >GitHub</a
+ >License</a
>
</div>
- <p class="copyright">© 2026 floatpane. MIT Licensed.</p>
</div>
</footer>
@@ -1,4 +1,4 @@
-/* Reset & Base Styles */
+/* Reset */
*,
*::before,
*::after {
@@ -8,39 +8,29 @@
}
:root {
- --bg-primary: #0a0a0b;
- --bg-secondary: #111113;
- --bg-tertiary: #1a1a1d;
- --bg-card: #16161a;
- --bg-hover: #1f1f24;
+ --bg: #09090b;
+ --bg-subtle: #0f0f12;
+ --bg-card: #131316;
+ --bg-elevated: #1a1a1f;
+ --bg-hover: #222228;
- --text-primary: #fafafa;
+ --text: #fafafa;
--text-secondary: #a1a1aa;
- --text-muted: #71717a;
+ --text-muted: #52525b;
- --accent-primary: #22c55e;
- --accent-secondary: #10b981;
- --accent-glow: rgba(34, 197, 94, 0.4);
+ --green: #22c55e;
+ --green-dim: #16a34a;
+ --green-glow: rgba(34, 197, 94, 0.15);
+ --teal: #14b8a6;
- --gradient-start: #22c55e;
- --gradient-mid: #10b981;
- --gradient-end: #06b6d4;
+ --border: rgba(255, 255, 255, 0.06);
+ --border-hover: rgba(255, 255, 255, 0.12);
- --border-color: #27272a;
- --border-hover: #3f3f46;
+ --radius: 12px;
+ --radius-sm: 8px;
- --radius-sm: 6px;
- --radius-md: 10px;
- --radius-lg: 16px;
- --radius-xl: 24px;
-
- --font-sans:
- "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- sans-serif;
- --font-mono:
- "SF Mono", "Menlo", "Monaco", "Cascadia Code", "Consolas", "monospace";
- --shadow-glow: 0 0 60px rgba(34, 197, 94, 0.15);
- --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
+ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ --mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;
}
html {
@@ -48,57 +38,67 @@ html {
}
body {
- font-family: var(--font-sans);
- background-color: var(--bg-primary);
- color: var(--text-primary);
+ font-family: var(--font);
+ background: var(--bg);
+ color: var(--text);
line-height: 1.6;
- min-height: 100vh;
overflow-x: hidden;
+ -webkit-font-smoothing: antialiased;
}
-/* Gradient Background */
-.gradient-bg {
+/* Subtle noise texture */
+.noise {
position: fixed;
- top: 0;
- left: 0;
- right: 0;
- height: 100vh;
- background:
- radial-gradient(
- ellipse 80% 50% at 50% -20%,
- rgba(34, 197, 94, 0.15),
- transparent
- ),
- radial-gradient(
- ellipse 60% 40% at 80% 60%,
- rgba(6, 182, 212, 0.08),
- transparent
- ),
- radial-gradient(
- ellipse 50% 30% at 20% 80%,
- rgba(16, 185, 129, 0.1),
- transparent
- );
+ inset: 0;
+ z-index: -1;
+ opacity: 0.03;
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+ pointer-events: none;
+}
+
+/* Ambient glow orbs */
+.gradient-orb {
+ position: fixed;
+ border-radius: 50%;
+ filter: blur(120px);
pointer-events: none;
z-index: -1;
}
-/* Header & Navigation */
+.orb-1 {
+ width: 600px;
+ height: 600px;
+ top: -200px;
+ left: 50%;
+ transform: translateX(-50%);
+ background: radial-gradient(circle, var(--green-glow), transparent 70%);
+}
+
+.orb-2 {
+ width: 400px;
+ height: 400px;
+ bottom: -100px;
+ right: -100px;
+ background: radial-gradient(circle, rgba(20, 184, 166, 0.08), transparent 70%);
+}
+
+/* Header */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
- background: rgba(10, 10, 11, 0.8);
- backdrop-filter: blur(20px);
- border-bottom: 1px solid var(--border-color);
+ background: rgba(9, 9, 11, 0.7);
+ backdrop-filter: blur(24px);
+ -webkit-backdrop-filter: blur(24px);
+ border-bottom: 1px solid var(--border);
}
nav {
- max-width: 1200px;
+ max-width: 1100px;
margin: 0 auto;
- padding: 1rem 2rem;
+ padding: 0.875rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
@@ -110,8 +110,8 @@ nav {
gap: 0.5rem;
text-decoration: none;
font-weight: 700;
- font-size: 1.25rem;
- color: var(--text-primary);
+ font-size: 1.15rem;
+ color: var(--text);
transition: opacity 0.2s;
}
@@ -119,116 +119,122 @@ nav {
opacity: 0.8;
}
-.logo-icon {
- font-size: 1.5rem;
-}
-
.nav-links {
display: flex;
align-items: center;
- gap: 2rem;
+ gap: 1.75rem;
}
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
- font-size: 0.9rem;
+ font-size: 0.875rem;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover {
- color: var(--text-primary);
+ color: var(--text);
}
-.github-link {
- display: flex;
+.nav-btn {
+ display: inline-flex !important;
align-items: center;
- gap: 0.5rem;
- padding: 0.5rem 1rem;
- background: var(--bg-tertiary);
- border-radius: var(--radius-md);
- border: 1px solid var(--border-color);
+ gap: 0.4rem;
+ padding: 0.45rem 0.9rem;
+ background: var(--bg-elevated);
+ border: 1px solid var(--border-hover);
+ border-radius: var(--radius-sm);
transition: all 0.2s;
}
-.github-link:hover {
+.nav-btn:hover {
background: var(--bg-hover);
- border-color: var(--border-hover);
+ border-color: rgba(255, 255, 255, 0.18);
}
-/* Main Content */
+/* Main */
main {
- max-width: 1200px;
+ max-width: 1100px;
margin: 0 auto;
- padding: 0 2rem;
+ padding: 0 1.5rem;
}
-/* Hero Section */
+/* Hero */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
- justify-content: center;
align-items: center;
text-align: center;
- padding-top: 6rem;
+ padding-top: 8rem;
padding-bottom: 4rem;
}
-.hero-badges {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: 0.75rem;
- margin-bottom: 2rem;
-}
-
-.badge {
+.hero-badge {
display: inline-flex;
align-items: center;
- padding: 0.4rem 0.9rem;
+ gap: 0.5rem;
+ padding: 0.4rem 1rem;
font-size: 0.8rem;
font-weight: 500;
- color: var(--text-secondary);
- background: var(--bg-tertiary);
- border: 1px solid var(--border-color);
- border-radius: 50px;
+ color: var(--green);
+ background: rgba(34, 197, 94, 0.08);
+ border: 1px solid rgba(34, 197, 94, 0.2);
+ border-radius: 100px;
+ margin-bottom: 2rem;
+ animation: fadeIn 0.5s ease-out 0.1s both;
+}
+
+.hero-badge-dot {
+ width: 6px;
+ height: 6px;
+ background: var(--green);
+ border-radius: 50%;
+ animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.4; }
}
.hero-title {
- font-size: clamp(2.5rem, 8vw, 5rem);
+ font-size: clamp(2.75rem, 7vw, 4.5rem);
font-weight: 800;
line-height: 1.1;
- letter-spacing: -0.02em;
+ letter-spacing: -0.03em;
margin-bottom: 1.5rem;
+ animation: fadeIn 0.5s ease-out 0.2s both;
}
.gradient-text {
- background: linear-gradient(
- 135deg,
- var(--gradient-start),
- var(--gradient-mid),
- var(--gradient-end)
- );
+ background: linear-gradient(135deg, var(--green), var(--teal));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
+.text-muted {
+ color: var(--text-muted);
+}
+
.hero-subtitle {
- font-size: 1.25rem;
+ font-size: 1.15rem;
color: var(--text-secondary);
- max-width: 600px;
+ max-width: 540px;
+ line-height: 1.75;
margin-bottom: 2.5rem;
- line-height: 1.7;
+ animation: fadeIn 0.5s ease-out 0.3s both;
}
-.hero-cta {
+.hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
- gap: 1rem;
+ gap: 0.75rem;
+ margin-bottom: 4rem;
+ animation: fadeIn 0.5s ease-out 0.4s both;
}
/* Buttons */
@@ -236,659 +242,591 @@ main {
display: inline-flex;
align-items: center;
gap: 0.5rem;
- padding: 0.875rem 1.75rem;
- font-size: 1rem;
+ padding: 0.7rem 1.4rem;
+ font-size: 0.9rem;
font-weight: 600;
+ font-family: var(--font);
text-decoration: none;
- border-radius: var(--radius-md);
+ border-radius: var(--radius-sm);
transition: all 0.2s;
cursor: pointer;
border: none;
+ white-space: nowrap;
+}
+
+.btn-lg {
+ padding: 0.85rem 1.75rem;
+ font-size: 0.95rem;
}
.btn-primary {
- background: linear-gradient(
- 135deg,
- var(--accent-primary),
- var(--accent-secondary)
- );
+ background: var(--green);
color: #000;
- box-shadow: var(--shadow-glow);
}
.btn-primary:hover {
- transform: translateY(-2px);
- box-shadow: 0 0 80px rgba(34, 197, 94, 0.25);
-}
-
-.btn-secondary {
- background: var(--bg-tertiary);
- color: var(--text-primary);
- border: 1px solid var(--border-color);
+ background: var(--green-dim);
+ transform: translateY(-1px);
+ box-shadow: 0 0 40px var(--green-glow);
}
-.btn-secondary:hover {
- background: var(--bg-hover);
- border-color: var(--border-hover);
-}
-
-.btn-icon {
- font-size: 1.1rem;
-}
-
-/* Section Titles */
-.section-title {
- font-size: 2.5rem;
- font-weight: 700;
- text-align: center;
- margin-bottom: 3rem;
- letter-spacing: -0.01em;
+.btn-ghost {
+ background: transparent;
+ color: var(--text-secondary);
+ border: 1px solid var(--border-hover);
}
-/* Terminal Preview Section */
-.preview {
- padding: 6rem 0;
+.btn-ghost:hover {
+ color: var(--text);
+ background: var(--bg-elevated);
+ border-color: rgba(255, 255, 255, 0.18);
}
-.terminal-window {
- background: var(--bg-secondary);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-lg);
+/* Hero Terminal */
+.hero-terminal {
+ width: 100%;
+ max-width: 680px;
+ border-radius: var(--radius);
+ border: 1px solid var(--border-hover);
+ background: var(--bg-subtle);
overflow: hidden;
- box-shadow: var(--shadow-card), var(--shadow-glow);
- max-width: 800px;
- margin: 0 auto 3rem;
+ box-shadow:
+ 0 0 0 1px rgba(255, 255, 255, 0.03),
+ 0 20px 50px rgba(0, 0, 0, 0.5),
+ 0 0 80px var(--green-glow);
+ animation: fadeUp 0.6s ease-out 0.5s both;
}
-.terminal-header {
+.terminal-chrome {
display: flex;
align-items: center;
- gap: 0.75rem;
- padding: 0.75rem 1rem;
- background: var(--bg-tertiary);
- border-bottom: 1px solid var(--border-color);
+ justify-content: space-between;
+ padding: 0.7rem 1rem;
+ background: var(--bg-card);
+ border-bottom: 1px solid var(--border);
}
-.terminal-buttons {
+.terminal-dots {
display: flex;
- gap: 0.5rem;
+ gap: 6px;
}
-.terminal-btn {
- width: 12px;
- height: 12px;
+.terminal-dots span {
+ width: 10px;
+ height: 10px;
border-radius: 50%;
+ background: var(--bg-hover);
}
-.terminal-btn.red {
- background: #ff5f57;
-}
-.terminal-btn.yellow {
- background: #ffbd2e;
-}
-.terminal-btn.green {
- background: #28ca41;
-}
+.terminal-dots span:nth-child(1) { background: #ff5f57; }
+.terminal-dots span:nth-child(2) { background: #ffbd2e; }
+.terminal-dots span:nth-child(3) { background: #28ca41; }
.terminal-title {
- flex: 1;
- text-align: center;
- font-size: 0.8rem;
+ font-family: var(--mono);
+ font-size: 0.75rem;
color: var(--text-muted);
- font-family: var(--font-mono);
}
.terminal-body {
- padding: 1.5rem;
- font-family: var(--font-mono);
- font-size: 0.9rem;
- line-height: 1.8;
+ padding: 1.25rem 1.5rem;
+ font-family: var(--mono);
+ font-size: 0.85rem;
}
.terminal-line {
display: flex;
gap: 0.5rem;
align-items: center;
+ margin-bottom: 1rem;
}
-.terminal-line.output {
- padding-left: 0;
- color: var(--text-secondary);
+.t-prompt { color: var(--green); }
+.t-cmd { color: var(--text-muted); }
+.t-text { color: var(--text); }
+
+.cursor {
+ color: var(--green);
+ animation: blink 1s step-end infinite;
}
-.terminal-line.dim {
- color: var(--text-muted);
- font-size: 0.8rem;
+@keyframes blink {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0; }
}
-.prompt {
- color: var(--accent-primary);
+.terminal-content {
+ opacity: 1;
}
-.command {
- color: var(--text-muted);
+.ascii-logo {
+ color: var(--green);
+ font-size: 0.7rem;
+ line-height: 1.2;
+ margin: 0 0 1rem 0;
+ white-space: pre;
}
-.typing {
- color: var(--text-primary);
+.tui-prompt {
+ color: var(--text-secondary);
+ font-size: 0.85rem;
+ margin-bottom: 1rem;
}
-.success {
- color: var(--accent-primary);
+.tui-menu {
+ margin-bottom: 1.25rem;
+ padding-left: 0.25rem;
}
-.info {
- margin-right: 0.25rem;
+.tui-item {
+ line-height: 1.9;
+ font-size: 0.85rem;
+ color: var(--text-secondary);
}
-.terminal-spacer {
- height: 1rem;
+.tui-item.active {
+ color: var(--green);
}
-.terminal-inbox {
- background: rgba(0, 0, 0, 0.3);
- border-radius: var(--radius-sm);
- overflow: hidden;
- margin-top: 0.5rem;
+.tui-arrow {
+ color: var(--green);
+ font-weight: 700;
+ margin-right: 0.25rem;
}
-/* TUI Preview Styles */
-.tui-badge {
+.tui-space {
display: inline-block;
- padding: 0.4rem 0.8rem;
- background: var(--accent-primary);
- color: #000;
- font-weight: 700;
- font-size: 0.85rem;
- border-radius: var(--radius-sm);
- margin-bottom: 1.5rem;
+ width: 0.85rem;
+ margin-right: 0.25rem;
}
-.tui-ascii-logo {
- color: var(--accent-primary);
- font-family: var(--font-mono);
+.tui-hint {
+ color: var(--text-muted);
font-size: 0.75rem;
- line-height: 1.2;
- margin: 0 0 1.5rem 0;
- white-space: pre;
}
-.tui-prompt {
+.tui-key {
color: var(--text-secondary);
- font-size: 0.95rem;
- margin-bottom: 1.5rem;
}
-.tui-menu {
+/* Logos strip */
+.logos-strip {
+ padding: 3rem 0;
+ border-top: 1px solid var(--border);
+ border-bottom: 1px solid var(--border);
margin-bottom: 2rem;
- padding-left: 0.5rem;
}
-.tui-menu-item {
+.strip-items {
display: flex;
+ justify-content: center;
align-items: center;
- gap: 0.5rem;
- line-height: 1.8;
- font-size: 0.95rem;
-}
-
-.tui-cursor {
- color: var(--accent-primary);
- font-weight: 700;
+ gap: 2rem;
+ flex-wrap: wrap;
}
-.tui-cursor-space {
- width: 0.6rem;
- display: inline-block;
+.strip-item {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--text-secondary);
}
-.tui-option {
- color: var(--text-primary);
+.strip-item svg {
+ color: var(--text-muted);
}
-.tui-option.selected {
- color: var(--accent-primary);
+.strip-tag {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.15rem 0.5rem;
+ font-size: 0.7rem;
+ font-weight: 700;
+ font-family: var(--mono);
+ color: var(--text-muted);
+ border: 1px solid var(--border-hover);
+ border-radius: 4px;
}
-.tui-hint {
- color: var(--text-muted);
- font-size: 0.85rem;
+.strip-divider {
+ width: 1px;
+ height: 20px;
+ background: var(--border-hover);
}
-.tui-key {
- color: var(--text-secondary);
+/* Sections */
+.section-header {
+ text-align: center;
+ margin-bottom: 3.5rem;
}
-.preview-image-container {
- max-width: 900px;
- margin: 0 auto;
- border-radius: var(--radius-lg);
- overflow: hidden;
- box-shadow: var(--shadow-card);
+.section-label {
+ display: inline-block;
+ font-size: 0.8rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ color: var(--green);
+ margin-bottom: 0.75rem;
}
-.preview-image {
- width: 100%;
- height: auto;
- display: block;
+.section-title {
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
+ font-weight: 700;
+ line-height: 1.2;
+ letter-spacing: -0.02em;
}
-/* Features Section */
+/* Features */
.features {
- padding: 6rem 0;
+ padding: 5rem 0;
}
.features-grid {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
- gap: 1.5rem;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 1rem;
}
.feature-card {
background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-lg);
- padding: 2rem;
- transition: all 0.3s;
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ padding: 1.75rem;
+ transition: all 0.3s ease;
+ opacity: 0;
+ transform: translateY(12px);
+}
+
+.feature-card.visible {
+ opacity: 1;
+ transform: translateY(0);
}
.feature-card:hover {
border-color: var(--border-hover);
- transform: translateY(-4px);
- box-shadow: var(--shadow-card);
+ background: var(--bg-elevated);
}
-.feature-icon {
- font-size: 2.5rem;
+.feature-highlight {
+ grid-column: 1 / -1;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ grid-template-rows: auto auto;
+ column-gap: 1.25rem;
+ background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), rgba(20, 184, 166, 0.02));
+ border-color: rgba(34, 197, 94, 0.15);
+}
+
+.feature-highlight .feature-icon-wrap {
+ grid-row: 1 / 3;
+}
+
+.feature-highlight:hover {
+ border-color: rgba(34, 197, 94, 0.25);
+}
+
+.feature-icon-wrap {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 44px;
+ height: 44px;
+ background: rgba(34, 197, 94, 0.08);
+ border: 1px solid rgba(34, 197, 94, 0.15);
+ border-radius: 10px;
+ color: var(--green);
margin-bottom: 1rem;
+ flex-shrink: 0;
+}
+
+.feature-highlight .feature-icon-wrap {
+ margin-bottom: 0;
}
.feature-card h3 {
- font-size: 1.25rem;
+ font-size: 1.05rem;
font-weight: 600;
- margin-bottom: 0.75rem;
- color: var(--text-primary);
+ margin-bottom: 0.5rem;
+ color: var(--text);
}
.feature-card p {
color: var(--text-secondary);
- font-size: 0.95rem;
- line-height: 1.7;
+ font-size: 0.9rem;
+ line-height: 1.65;
}
-/* Installation Section */
+/* Installation */
.installation {
- padding: 6rem 0;
+ padding: 5rem 0;
}
-.install-methods {
- display: flex;
- flex-direction: column;
- gap: 3rem;
- max-width: 800px;
+.install-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+ gap: 1.25rem;
+ max-width: 820px;
margin: 0 auto;
}
-.install-method h3 {
- font-size: 1.5rem;
- font-weight: 600;
- margin-bottom: 1.5rem;
+.install-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ padding: 1.75rem;
+ opacity: 0;
+ transform: translateY(12px);
+ transition: all 0.3s ease;
+}
+
+.install-card.visible {
+ opacity: 1;
+ transform: translateY(0);
}
-.install-header {
+.primary-install {
+ border-color: rgba(34, 197, 94, 0.2);
+ background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), transparent);
+}
+
+.install-card-header {
display: flex;
align-items: center;
- gap: 1rem;
- margin-bottom: 1.5rem;
+ gap: 0.75rem;
+ margin-bottom: 1.25rem;
}
-.install-badge {
- padding: 0.3rem 0.8rem;
- font-size: 0.75rem;
+.install-card h3 {
+ font-size: 1.1rem;
font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- border-radius: 50px;
- position: relative;
- top: -13px;
+ margin-bottom: 1.25rem;
}
-.install-badge.recommended {
- background: rgba(34, 197, 94, 0.15);
- color: var(--accent-primary);
- border: 1px solid rgba(34, 197, 94, 0.3);
+.install-card-header h3 {
+ margin-bottom: 0;
}
-.code-block {
- background: var(--bg-secondary);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- overflow: hidden;
+.recommended-badge {
+ font-size: 0.7rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ padding: 0.2rem 0.6rem;
+ color: var(--green);
+ background: rgba(34, 197, 94, 0.1);
+ border: 1px solid rgba(34, 197, 94, 0.2);
+ border-radius: 100px;
}
-.code-block.small {
- margin-top: 0.75rem;
+.code-block {
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ overflow: hidden;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
- padding: 0.75rem 1rem;
- background: var(--bg-tertiary);
- border-bottom: 1px solid var(--border-color);
- font-size: 0.8rem;
+ padding: 0.6rem 0.9rem;
+ border-bottom: 1px solid var(--border);
+ font-size: 0.75rem;
color: var(--text-muted);
}
.copy-btn {
- padding: 0.3rem 0.75rem;
- font-size: 0.75rem;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ padding: 0.25rem 0.6rem;
+ font-size: 0.72rem;
font-weight: 500;
- color: var(--text-secondary);
- background: var(--bg-hover);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-sm);
+ font-family: var(--font);
+ color: var(--text-muted);
+ background: transparent;
+ border: 1px solid var(--border);
+ border-radius: 6px;
cursor: pointer;
- transition: all 0.2s;
- font-family: var(--font-sans);
+ transition: all 0.15s;
}
.copy-btn:hover {
- background: var(--accent-primary);
- color: #000;
- border-color: var(--accent-primary);
+ color: var(--text);
+ background: var(--bg-elevated);
+ border-color: var(--border-hover);
}
.copy-btn.copied {
- background: var(--accent-primary);
- color: #000;
- border-color: var(--accent-primary);
+ color: var(--green);
+ border-color: rgba(34, 197, 94, 0.3);
}
.code-body {
- padding: 1rem 1.25rem;
- font-family: var(--font-mono);
- font-size: 0.9rem;
+ padding: 0.85rem 1rem;
+ font-family: var(--mono);
+ font-size: 0.82rem;
}
.code-line {
display: flex;
- gap: 0.5rem;
+ gap: 0.6rem;
line-height: 2;
}
-.code-text {
- color: var(--text-primary);
-}
-
-.install-steps {
- display: flex;
- flex-direction: column;
- gap: 1.5rem;
-}
-
-.install-step {
- display: flex;
- gap: 1.5rem;
-}
-
-.step-number {
- width: 40px;
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--bg-tertiary);
- border: 1px solid var(--border-color);
- border-radius: 50%;
- font-weight: 700;
- color: var(--accent-primary);
- flex-shrink: 0;
+.line-prompt {
+ color: var(--text-muted);
+ user-select: none;
}
-.step-content {
- flex: 1;
+.code-text {
+ color: var(--text);
}
-.step-content h4 {
- font-size: 1.1rem;
- font-weight: 600;
- margin-bottom: 0.5rem;
+.install-docs-hint {
+ text-align: center;
+ margin-top: 2rem;
+ font-size: 0.9rem;
+ color: var(--text-muted);
}
-.step-content p {
- color: var(--text-secondary);
- font-size: 0.9rem;
+.install-docs-hint a {
+ color: var(--green);
+ text-decoration: none;
}
-/* Usage Section */
-.usage {
- padding: 6rem 0;
+.install-docs-hint a:hover {
+ text-decoration: underline;
}
-.usage-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: 1.25rem;
- margin-bottom: 4rem;
+/* CTA Section */
+.cta-section {
+ padding: 5rem 0;
}
-.usage-card {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- padding: 1.5rem;
+.cta-card {
text-align: center;
- transition: all 0.2s;
+ padding: 4rem 2rem;
+ background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(20, 184, 166, 0.03));
+ border: 1px solid rgba(34, 197, 94, 0.12);
+ border-radius: 20px;
+ opacity: 0;
+ transform: translateY(12px);
+ transition: all 0.3s ease;
}
-.usage-card:hover {
- border-color: var(--border-hover);
- transform: translateY(-2px);
+.cta-card.visible {
+ opacity: 1;
+ transform: translateY(0);
}
-.usage-keys {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 0.5rem;
+.cta-card h2 {
+ font-size: clamp(1.5rem, 3.5vw, 2.25rem);
+ font-weight: 700;
+ line-height: 1.2;
+ letter-spacing: -0.02em;
margin-bottom: 1rem;
- flex-wrap: wrap;
-}
-
-kbd {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 32px;
- height: 32px;
- padding: 0 0.5rem;
- font-family: var(--font-mono);
- font-size: 0.8rem;
- font-weight: 500;
- color: var(--text-primary);
- background: var(--bg-tertiary);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-sm);
- box-shadow: 0 2px 0 var(--border-color);
-}
-
-.or,
-.plus {
- color: var(--text-muted);
- font-size: 0.75rem;
-}
-
-.usage-card h4 {
- font-size: 1rem;
- font-weight: 600;
- margin-bottom: 0.5rem;
}
-.usage-card p {
- color: var(--text-secondary);
- font-size: 0.85rem;
-}
-
-.providers {
- text-align: center;
-}
-
-.providers h3 {
- font-size: 1.25rem;
- font-weight: 600;
- margin-bottom: 1.5rem;
+.cta-card p {
color: var(--text-secondary);
+ font-size: 1.05rem;
+ max-width: 520px;
+ margin: 0 auto 2rem;
+ line-height: 1.7;
}
-.provider-list {
+.cta-actions {
display: flex;
justify-content: center;
- gap: 2rem;
flex-wrap: wrap;
+ gap: 0.75rem;
+ margin-bottom: 2rem;
}
-.provider {
+.cta-links {
display: flex;
+ justify-content: center;
align-items: center;
- gap: 0.5rem;
- padding: 0.75rem 1.5rem;
- background: var(--bg-tertiary);
- border: 1px solid var(--border-color);
- border-radius: 50px;
- font-weight: 500;
+ gap: 0.75rem;
+ font-size: 0.85rem;
}
-.provider.coming-soon {
+.cta-links a {
color: var(--text-muted);
- border-style: dashed;
-}
-
-.provider-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--accent-primary);
-}
-
-.provider-icon svg {
- width: 20px;
- height: 20px;
-}
-
-/* Contact Section */
-.contact {
- padding: 6rem 0;
-}
-
-.contact-content {
- text-align: center;
- max-width: 600px;
- margin: 0 auto;
-}
-
-.contact h2 {
- font-size: 2rem;
- font-weight: 700;
- margin-bottom: 1rem;
-}
-
-.contact p {
- color: var(--text-secondary);
- margin-bottom: 0.75rem;
- font-size: 1.1rem;
-}
-
-.contact a {
- color: var(--accent-primary);
text-decoration: none;
- transition: opacity 0.2s;
-}
-
-.contact a:hover {
- opacity: 0.8;
- text-decoration: underline;
-}
-
-.support-links {
- display: flex;
- justify-content: center;
- gap: 1rem;
- margin-top: 2rem;
- flex-wrap: wrap;
+ transition: color 0.2s;
}
-.support-link {
- display: inline-flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.75rem 1.5rem;
- background: var(--bg-tertiary);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- color: var(--text-primary) !important;
- text-decoration: none !important;
- font-weight: 500;
- transition: all 0.2s;
+.cta-links a:hover {
+ color: var(--text-secondary);
}
-.support-link:hover {
- background: var(--bg-hover);
- border-color: var(--border-hover);
- transform: translateY(-2px);
+.cta-divider {
+ color: var(--text-muted);
}
/* Footer */
footer {
- border-top: 1px solid var(--border-color);
- padding: 3rem 2rem;
- margin-top: 4rem;
+ border-top: 1px solid var(--border);
+ padding: 2rem 1.5rem;
+ margin-top: 2rem;
}
.footer-content {
- max-width: 1200px;
+ max-width: 1100px;
margin: 0 auto;
display: flex;
- flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.footer-left {
+ display: flex;
align-items: center;
gap: 1.5rem;
- text-align: center;
}
.footer-brand {
display: flex;
align-items: center;
- gap: 0.5rem;
- font-weight: 700;
- font-size: 1.1rem;
+ gap: 0.4rem;
+ font-weight: 600;
+ font-size: 0.95rem;
}
-.footer-links {
+.footer-copyright {
+ color: var(--text-muted);
+ font-size: 0.8rem;
+}
+
+.footer-right {
display: flex;
- gap: 2rem;
- flex-wrap: wrap;
- justify-content: center;
+ gap: 1.5rem;
}
-.footer-links a {
- color: var(--text-secondary);
+.footer-right a {
+ color: var(--text-muted);
text-decoration: none;
- font-size: 0.9rem;
+ font-size: 0.85rem;
transition: color 0.2s;
}
-.footer-links a:hover {
- color: var(--text-primary);
+.footer-right a:hover {
+ color: var(--text-secondary);
}
-.copyright {
- color: var(--text-muted);
- font-size: 0.85rem;
+/* Animations */
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
}
-/* Animations */
-@keyframes fadeInUp {
+@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);