From d8e0de15ef7eb57bcc105eebb3a1ca24f3005e1b Mon Sep 17 00:00:00 2001 From: Drew Smirnoff Date: Wed, 11 Mar 2026 11:16:19 +0400 Subject: [PATCH] public: update website (#275) --- public/index.html | 901 +++++++++++++++++++++---------------- public/style.css | 1088 +++++++++++++++++++++------------------------ 2 files changed, 1004 insertions(+), 985 deletions(-) diff --git a/public/index.html b/public/index.html index 09c9b97e5726d0766b919d63c564f6b3875f82ad..ee96ad6735e6a9b2774b09b21249721f6828b186 100644 --- a/public/index.html +++ b/public/index.html @@ -3,10 +3,10 @@ - Matcha Client - Matcha - Terminal Email Client + @@ -19,7 +19,9 @@ -
+
+
+
-
-
- MIT License - macOS & Linux - Written in Go +
+ + Open Source · MIT Licensed

- The Ultimate
- Terminal Email Client. + Email belongs in
+ your terminal.

- 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.

-
+
- ⬇ - Download Now + Get Started + + + + - View on GitHub + + + + Star on GitHub + + + + + + + Documentation
-
- -
-

Live Preview

- -
-
-
- - - +
+
+
+ +
+ matcha + - matcha — zsh
- -
What would you like to do?
-
-
- > - Inbox -
-
- - Compose - Email -
-
- - Sent -
-
- - - Drafts -
-
- - - Settings -
-
- - Trash & - Archive -
-
-
- Use ↑/↓ to navigate, - enter to select, and - ctrl+c to quit. +
+ ~ + $ + matcha + |
+
+
+
+
+ +
+
+
+ + + + + Gmail +
+
+
+ + + + iCloud +
+
+
+ + + + + Custom IMAP +
+
+
+ Go + Written in Go +
+
+
+ MIT + Open Source
-
-

Features

+
+ Features +

+ Everything you need.
Nothing you don't. +

+
-
-
📬
-

View Your Inbox

-

- Fetches and displays a list of your most recent - emails with beautiful formatting and quick - navigation. -

-
- -
-
📖
-

Read Emails

+
+
+ + + + +
+

Full Inbox Management

- 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.

-
✍️
+
+ + + + +

Compose & Send

- 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.

-
🎨
-

Beautiful TUI

+
+ + + + + + +
+

Multiple Accounts

- 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.

-
🔐
-

Secure

+
+ + + + + +
+

Keyboard-First

- 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.

-
⌨️
-

Keyboard Driven

+
+ + + +
+

Blazing Fast

- 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.

-
👥
-

Multiple Accounts

+
+ + + + +
+

Private & Secure

- 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.

-
📇
+
+ + + + + + +

Contacts

- 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.

-
⚡
-

Email Caching

+
+ + + + + +
+

Beautiful TUI

- 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.

-
-

Installation

+
+ Get Started +

+ Up and running
in seconds. +

+
-
-
-
-

Install with Homebrew

- Recommended +
+
+
+

Homebrew

+ Recommended
-
Terminal @@ -277,298 +483,187 @@ class="copy-btn" onclick="copyCode(this)" > - Copy All + + + + + Copy
- ~ - $ - brew tap floatpane/matcha -
-
- ~ - $ - $brew install floatpane/matcha/matcha
- ~ - $ - matcha + $matcha
-
-

Or, Build from Source

- -
-
-
1
-
-

Clone the Repository

-

- Grab the source code from GitHub. Make - sure you have Go installed. -

-
-
-
- git clone - https://github.com/floatpane/matcha.git -
-
-
-
+
+

Build from Source

+
+
+ Terminal +
- -
-
2
-
-

Build the Binary

-

- Navigate to the project folder and - compile. -

-
-
-
- cd matcha && go build -o - matcha -
-
-
+
+
+ $git clone + https://github.com/floatpane/matcha.git
-
- -
-
3
-
-

Run It

-

- Execute the binary or move it to your - PATH for global access. -

-
-
-
- ./matcha -
-
-
+
+ $cd matcha && make build +
+
+ $matcha
-
- - -
-

Usage

- -
-
-
- ↑↓ - or - kj -
-

Navigate

-

Move through menus and email lists

-
- -
-
- Enter -
-

Select

-

Open emails or confirm actions

-
- -
-
- c -
-

Compose

-

Start writing a new email

-
- -
-
- Tab -
-

Switch Fields

-

Move between To, Subject, and Body

-
- -
-
- Esc -
-

Go Back

-

Return to the previous view

-
- -
-
- Ctrl+C -
-

Quit

-

Exit the application

-
-
-
-

Supported Providers

-
-
- - - - - - - Gmail -
-
- - - - - - iCloud -
-
- - - - - - - Custom -
-
-
+

+ Need help setting up? Check the + documentation + for detailed guides. +

- -
-
-

Get in Touch

+
+
+

Ready to ditch the browser
for your email?

- Made with ❤️ by - floatpane -

-

- For support, please open an issue on the - GitHub repository. + Join developers who manage their inbox from the + terminal. Star the project to show your support and stay + updated.

- -
+
- ❤️ Support on Patreon + + + + Star on GitHub - ☕ Buy us a coffee + Read the Docs
+
+ Support the developer
@@ -581,17 +676,17 @@ .join("\n"); navigator.clipboard.writeText(text).then(() => { - const originalText = btn.textContent; - btn.textContent = "Copied!"; + const originalHTML = btn.innerHTML; + btn.innerHTML = + ' Copied!'; btn.classList.add("copied"); setTimeout(() => { - btn.textContent = originalText; + btn.innerHTML = originalHTML; btn.classList.remove("copied"); }, 2000); }); } - // Smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach((anchor) => { anchor.addEventListener("click", function (e) { e.preventDefault(); @@ -606,6 +701,24 @@ } }); }); + + // Fade in elements on scroll + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("visible"); + } + }); + }, + { threshold: 0.1 }, + ); + + document + .querySelectorAll(".feature-card, .install-card, .cta-card") + .forEach((el) => { + observer.observe(el); + }); diff --git a/public/style.css b/public/style.css index 9c2e06e2ffa5f47de9148f597a04e389c3f54375..7e7136245897f85392e2a91171b8ec25b8ed52ad 100644 --- a/public/style.css +++ b/public/style.css @@ -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); @@ -899,99 +837,68 @@ footer { } } -.hero-badges, -.hero-title, -.hero-subtitle, -.hero-cta { - animation: fadeInUp 0.6s ease-out backwards; -} - -.hero-badges { - animation-delay: 0.1s; -} -.hero-title { - animation-delay: 0.2s; -} -.hero-subtitle { - animation-delay: 0.3s; -} -.hero-cta { - animation-delay: 0.4s; -} - /* Responsive */ @media (max-width: 768px) { nav { - padding: 1rem; + padding: 0.75rem 1rem; } .nav-links { gap: 1rem; } - .nav-links a:not(.github-link) { + .nav-links a:not(.nav-btn) { display: none; } .hero { - padding-top: 8rem; + padding-top: 7rem; } - .hero-title { - font-size: 2.5rem; + .hero-terminal { + max-width: 100%; } - .hero-subtitle { - font-size: 1.1rem; + .features-grid { + grid-template-columns: 1fr; } - .section-title { - font-size: 2rem; + .feature-highlight { + grid-template-columns: 1fr; + grid-template-rows: auto; } - .terminal-body { - font-size: 0.8rem; - padding: 1rem; + .feature-highlight .feature-icon-wrap { + grid-row: auto; + margin-bottom: 1rem; } - .inbox-item { - grid-template-columns: 80px 1fr; + .install-grid { + grid-template-columns: 1fr; } - .inbox-time { + .strip-divider { display: none; } - .features-grid { - grid-template-columns: 1fr; - } - - .usage-grid { - grid-template-columns: repeat(2, 1fr); + .strip-items { + gap: 1.25rem; } - .install-step { + .footer-content { flex-direction: column; gap: 1rem; + text-align: center; } - .step-number { - width: 32px; - height: 32px; - font-size: 0.9rem; - } - - footer { - padding: 2rem 1rem; - } - - .footer-links { - gap: 1rem; + .footer-left { + flex-direction: column; + gap: 0.5rem; } } @media (max-width: 480px) { - .hero-cta { + .hero-actions { flex-direction: column; width: 100%; } @@ -1001,12 +908,11 @@ footer { justify-content: center; } - .usage-grid { - grid-template-columns: 1fr; + .cta-actions { + flex-direction: column; } - .provider-list { - flex-direction: column; - align-items: center; + .cta-card { + padding: 2.5rem 1.5rem; } }