mirror of
https://github.com/kunkunsh/kunkun-ext-neohtop.git
synced 2025-04-11 17:29:45 +00:00
enhancing landing page
This commit is contained in:
Abdenasser
parent
9c22af63c9
commit
0203515295
268
docs/index.html
268
docs/index.html
@ -29,85 +29,81 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header class="glass-nav">
|
||||||
<nav>
|
<nav>
|
||||||
<a href="#home">Home</a>
|
<div class="logo-container">
|
||||||
<a href="#features">Features</a>
|
<img src="https://github.com/Abdenasser/neohtop/raw/main/app-icon.png" alt="NeoHtop" class="nav-logo">
|
||||||
<a href="#download">Download</a>
|
<span class="nav-brand">NeoHtop</span>
|
||||||
<a href="#install">Install</a>
|
</div>
|
||||||
<a href="#changelog">Changelog</a>
|
<div class="nav-links">
|
||||||
<button id="themeToggle" class="theme-toggle" aria-label="Toggle theme">
|
<a href="#home">Home</a>
|
||||||
<span class="theme-icon">🌙</span>
|
<a href="#features">Features</a>
|
||||||
</button>
|
<a href="#download">Download</a>
|
||||||
|
<a href="#install">Install</a>
|
||||||
|
<a href="#faq">FAQ</a>
|
||||||
|
<button id="themeToggle" class="theme-toggle" aria-label="Toggle theme">
|
||||||
|
<span class="theme-icon">🌙</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section id="home" class="hero">
|
<section id="home" class="hero">
|
||||||
<img src="https://github.com/Abdenasser/neohtop/raw/main/app-icon.png" alt="NeoHtop Logo" class="logo">
|
<div class="hero-content">
|
||||||
<h1>NeoHtop</h1>
|
<div class="hero-text">
|
||||||
<p class="tagline">A modern, cross-platform system monitor</p>
|
<h1 class="gradient-text">Monitor Your System<br>With Style</h1>
|
||||||
<div class="badges">
|
<p class="hero-subtitle">A beautiful, lightning-fast system monitor built with Rust and Svelte. Experience
|
||||||
<span class="badge">Rust</span>
|
real-time performance monitoring like never before.</p>
|
||||||
<span class="badge">Tauri</span>
|
<div class="hero-cta">
|
||||||
<span class="badge">Svelte</span>
|
<a href="#download" class="primary-button">Download Now</a>
|
||||||
|
<a href="https://github.com/abdenasser/neohtop" class="secondary-button">
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="tech-stack">
|
||||||
|
<span class="tech-badge">Rust</span>
|
||||||
|
<span class="tech-badge">Tauri</span>
|
||||||
|
<span class="tech-badge">Svelte</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-image">
|
||||||
|
<img src="https://github.com/Abdenasser/neohtop/raw/main/screenshot.jpg" alt="NeoHtop Interface"
|
||||||
|
class="floating-screenshot">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="badges">
|
|
||||||
<a href="https://github.com/Abdenasser/neohtop/blob/main/LICENSE" aria-label="License">
|
|
||||||
<img src="https://img.shields.io/github/license/Abdenasser/neohtop" alt="License">
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/Abdenasser/neohtop/stargazers" aria-label="GitHub stars">
|
|
||||||
<img src="https://img.shields.io/github/stars/Abdenasser/neohtop" alt="GitHub stars">
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/Abdenasser/neohtop/issues" aria-label="GitHub issues">
|
|
||||||
<img src="https://img.shields.io/github/issues/Abdenasser/neohtop" alt="GitHub issues">
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/Abdenasser/neohtop/releases" aria-label="GitHub release">
|
|
||||||
<img src="https://img.shields.io/github/v/release/Abdenasser/neohtop" alt="GitHub release">
|
|
||||||
</a>
|
|
||||||
<a href="https://developer.apple.com/support/notarization/" aria-label="Notarized by Apple">
|
|
||||||
<img src="https://img.shields.io/badge/Notarized_by_Apple-000000?style=flat-square&logo=apple&logoColor=white"
|
|
||||||
alt="Notarized by Apple">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="screenshot">
|
|
||||||
<img src="https://github.com/Abdenasser/neohtop/raw/main/screenshot.jpg" alt="NeoHtop Screenshot"
|
|
||||||
class="screenshot-img" loading="lazy">
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="features" class="features">
|
<section id="features" class="features">
|
||||||
<h2>Features</h2>
|
<h2 class="section-title">Why Choose NeoHtop?</h2>
|
||||||
<div class="feature-grid">
|
<div class="feature-grid">
|
||||||
<div class="feature">
|
<div class="feature-card">
|
||||||
<span class="emoji">🚀</span>
|
<div class="feature-icon">🚀</div>
|
||||||
<h3>Real-time Monitoring</h3>
|
<h3>Real-time Monitoring</h3>
|
||||||
<p>Track system processes in real-time with minimal resource usage</p>
|
<p>Track system processes in real-time with minimal resource usage</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature">
|
<div class="feature-card">
|
||||||
<span class="emoji">🎨</span>
|
<div class="feature-icon">🎨</div>
|
||||||
<h3>Modern UI</h3>
|
<h3>Modern UI</h3>
|
||||||
<p>Beautiful interface with automatic dark/light theme detection</p>
|
<p>Beautiful interface with automatic dark/light theme detection</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature">
|
<div class="feature-card">
|
||||||
<span class="emoji">🔍</span>
|
<div class="feature-icon">🔍</div>
|
||||||
<h3>Smart Search</h3>
|
<h3>Smart Search</h3>
|
||||||
<p>Quick process search with advanced filtering options</p>
|
<p>Quick process search with advanced filtering options</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature">
|
<div class="feature-card">
|
||||||
<span class="emoji">📌</span>
|
<div class="feature-icon">📌</div>
|
||||||
<h3>Process Pinning</h3>
|
<h3>Process Pinning</h3>
|
||||||
<p>Keep important processes in view for easy monitoring</p>
|
<p>Keep important processes in view for easy monitoring</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature">
|
<div class="feature-card">
|
||||||
<span class="emoji">⚡️</span>
|
<div class="feature-icon">⚡️</div>
|
||||||
<h3>Resource Efficient</h3>
|
<h3>Resource Efficient</h3>
|
||||||
<p>Built with Rust for optimal performance and low memory usage</p>
|
<p>Built with Rust for optimal performance and low memory usage</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature">
|
<div class="feature-card">
|
||||||
<span class="emoji">🛠</span>
|
<div class="feature-icon">🛠</div>
|
||||||
<h3>Process Management</h3>
|
<h3>Process Management</h3>
|
||||||
<p>View and manage processes with detailed information</p>
|
<p>View and manage processes with detailed information</p>
|
||||||
</div>
|
</div>
|
||||||
@ -115,18 +111,27 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="download" class="downloads">
|
<section id="download" class="downloads">
|
||||||
<h2>Download for macOS</h2>
|
<div class="download-container glass-card">
|
||||||
<div class="download-options">
|
<h2>Download for macOS</h2>
|
||||||
<a href="https://github.com/Abdenasser/neohtop/releases/download/v1.0.1/NeoHtop-intel.dmg"
|
<p class="download-subtitle">Choose the version that matches your Mac</p>
|
||||||
class="download-button">
|
<div class="download-options">
|
||||||
<span class="icon">💻</span>
|
<a href="https://github.com/Abdenasser/neohtop/releases/download/v1.0.1/NeoHtop-intel.dmg"
|
||||||
Intel Mac
|
class="download-button intel">
|
||||||
</a>
|
<span class="icon">💻</span>
|
||||||
<a href="https://github.com/Abdenasser/neohtop/releases/download/v1.0.1/NeoHtop-silicon.dmg"
|
<div class="button-text">
|
||||||
class="download-button">
|
<span class="primary">Intel Mac</span>
|
||||||
<span class="icon">🍎</span>
|
<span class="secondary">For Intel-based Macs</span>
|
||||||
Apple Silicon
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
<a href="https://github.com/Abdenasser/neohtop/releases/download/v1.0.1/NeoHtop-silicon.dmg"
|
||||||
|
class="download-button silicon">
|
||||||
|
<span class="icon">🍎</span>
|
||||||
|
<div class="button-text">
|
||||||
|
<span class="primary">Apple Silicon</span>
|
||||||
|
<span class="secondary">For M1/M2/M3 Macs</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -157,26 +162,67 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="faq" class="faq">
|
<section id="faq" class="faq">
|
||||||
<h2>Frequently Asked Questions</h2>
|
<h2 class="section-title">Frequently Asked Questions</h2>
|
||||||
<div class="faq-list">
|
<div class="faq-list">
|
||||||
<div class="faq-item">
|
<div class="faq-item">
|
||||||
<div class="faq-question">
|
<button class="faq-question">
|
||||||
How does NeoHtop compare to Activity Monitor?
|
<span class="question-text">How does NeoHtop compare to Activity Monitor?</span>
|
||||||
<span class="arrow">▼</span>
|
<span class="faq-icon">⌄</span>
|
||||||
</div>
|
</button>
|
||||||
<div class="faq-answer">
|
<div class="faq-answer">
|
||||||
NeoHtop offers a modern interface with additional features like process pinning, smart search, and themes
|
<p>NeoHtop offers a modern interface with additional features like process pinning, smart search, and themes
|
||||||
while maintaining high performance through its Rust backend.
|
while maintaining high performance through its Rust backend. It's designed to be more user-friendly and
|
||||||
|
efficient than traditional system monitors.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="faq-item">
|
<div class="faq-item">
|
||||||
<div class="faq-question">
|
<button class="faq-question">
|
||||||
Is NeoHtop resource intensive?
|
<span class="question-text">Is NeoHtop resource intensive?</span>
|
||||||
<span class="arrow">▼</span>
|
<span class="faq-icon">⌄</span>
|
||||||
</div>
|
</button>
|
||||||
<div class="faq-answer">
|
<div class="faq-answer">
|
||||||
No, NeoHtop is built with Rust and optimized for minimal resource usage, typically using less than 1% CPU
|
<p>No, NeoHtop is built with Rust and optimized for minimal resource usage, typically using less than 1% CPU
|
||||||
and minimal memory.
|
and minimal memory. It's designed to be lightweight while monitoring your system.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<button class="faq-question">
|
||||||
|
<span class="question-text">Does NeoHtop work on all macOS versions?</span>
|
||||||
|
<span class="faq-icon">⌄</span>
|
||||||
|
</button>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>NeoHtop supports macOS 10.15 (Catalina) and newer versions. It's optimized for both Intel and Apple
|
||||||
|
Silicon Macs, with native support for both architectures.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<button class="faq-question">
|
||||||
|
<span class="question-text">Can I customize the interface?</span>
|
||||||
|
<span class="faq-icon">⌄</span>
|
||||||
|
</button>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Yes, NeoHtop offers various customization options including:
|
||||||
|
<ul>
|
||||||
|
<li>Dark/Light theme switching</li>
|
||||||
|
<li>Customizable columns and metrics</li>
|
||||||
|
<li>Adjustable refresh rates</li>
|
||||||
|
<li>Process grouping options</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<button class="faq-question">
|
||||||
|
<span class="question-text">Is NeoHtop open source?</span>
|
||||||
|
<span class="faq-icon">⌄</span>
|
||||||
|
</button>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Yes, NeoHtop is completely open source and available on GitHub. You can contribute to the project, report
|
||||||
|
issues, or suggest new features through our GitHub repository.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -184,14 +230,66 @@
|
|||||||
|
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>
|
|
||||||
<a href="https://github.com/abdenasser/neohtop" class="github-link">View on GitHub</a>
|
|
||||||
</p>
|
|
||||||
<p class="copyright">© 2024 NeoHtop</p>
|
|
||||||
</footer>
|
|
||||||
</main>
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-section">
|
||||||
|
<h3>NeoHtop</h3>
|
||||||
|
<p class="footer-description">
|
||||||
|
A modern system monitor built with Rust and Svelte.
|
||||||
|
Open source and free to use.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Links</h4>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/abdenasser/neohtop" target="_blank" rel="noopener">
|
||||||
|
<span class="icon">📦</span> GitHub Repository
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/abdenasser" target="_blank" rel="noopener">
|
||||||
|
<span class="icon">👨💻</span> Creator
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/abdenasser/neohtop/issues" target="_blank" rel="noopener">
|
||||||
|
<span class="icon">🐛</span> Report Issue
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Tech Stack</h4>
|
||||||
|
<ul class="tech-stack-list">
|
||||||
|
<li>
|
||||||
|
<a href="https://www.rust-lang.org/" target="_blank" rel="noopener">
|
||||||
|
<span class="icon">🦀</span> Rust
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://tauri.app/" target="_blank" rel="noopener">
|
||||||
|
<span class="icon">⚡</span> Tauri
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://svelte.dev/" target="_blank" rel="noopener">
|
||||||
|
<span class="icon">🎯</span> Svelte
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>Made with <span class="heart">❤️</span> and <span class="coffee">☕</span> by
|
||||||
|
<a href="https://github.com/abdenasser" target="_blank" rel="noopener">Abdenasser</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
16
docs/main.js
16
docs/main.js
@ -30,23 +30,19 @@ prefersDark.addEventListener('change', (e) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// FAQ Accordion
|
// FAQ Accordion
|
||||||
document.querySelectorAll('.faq-question').forEach(question => {
|
document.querySelectorAll('.faq-question').forEach(button => {
|
||||||
question.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
const item = question.parentElement;
|
const faqItem = button.parentElement;
|
||||||
const isActive = item.classList.contains('active');
|
const isActive = faqItem.classList.contains('active');
|
||||||
|
|
||||||
// Close all FAQ items
|
// Close all FAQ items
|
||||||
document.querySelectorAll('.faq-item').forEach(item => {
|
document.querySelectorAll('.faq-item').forEach(item => {
|
||||||
item.classList.remove('active');
|
item.classList.remove('active');
|
||||||
const answer = item.querySelector('.faq-answer');
|
|
||||||
answer.style.maxHeight = null;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Open clicked item if it wasn't active
|
// Toggle clicked item
|
||||||
if (!isActive) {
|
if (!isActive) {
|
||||||
item.classList.add('active');
|
faqItem.classList.add('active');
|
||||||
const answer = item.querySelector('.faq-answer');
|
|
||||||
answer.style.maxHeight = answer.scrollHeight + 'px';
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
697
docs/styles.css
697
docs/styles.css
@ -1,23 +1,17 @@
|
|||||||
:root {
|
:root {
|
||||||
--primary: #2563eb;
|
--primary-color: #6366f1;
|
||||||
--primary-light: #3b82f6;
|
--secondary-color: #818cf8;
|
||||||
--text: #1f2937;
|
|
||||||
--background: #ffffff;
|
--background: #ffffff;
|
||||||
--card: #f3f4f6;
|
--text-primary: #1f2937;
|
||||||
--border: #e5e7eb;
|
--text-secondary: #4b5563;
|
||||||
--hover: #f9fafb;
|
--card-background: rgba(255, 255, 255, 0.8);
|
||||||
--code-bg: #f1f5f9;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] {
|
[data-theme="dark"] {
|
||||||
--primary: #3b82f6;
|
--background: #0f172a;
|
||||||
--primary-light: #60a5fa;
|
--text-primary: #f1f5f9;
|
||||||
--text: #f3f4f6;
|
--text-secondary: #cbd5e1;
|
||||||
--background: #111827;
|
--card-background: rgba(30, 41, 59, 0.8);
|
||||||
--card: #1f2937;
|
|
||||||
--border: #374151;
|
|
||||||
--hover: #1f2937;
|
|
||||||
--code-bg: #1e293b;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@ -28,11 +22,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--text);
|
color: var(--text-primary);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
transition: background-color 0.3s, color 0.3s;
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header & Navigation */
|
/* Header & Navigation */
|
||||||
@ -48,22 +46,53 @@ header {
|
|||||||
nav {
|
nav {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 1rem 2rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a {
|
.logo-container {
|
||||||
color: var(--text);
|
display: flex;
|
||||||
text-decoration: none;
|
align-items: center;
|
||||||
padding: 0.5rem 1rem;
|
gap: 0.75rem;
|
||||||
border-radius: 6px;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a:hover {
|
.nav-logo {
|
||||||
background: var(--hover);
|
width: 32px;
|
||||||
|
/* Adjust size as needed */
|
||||||
|
height: 32px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-brand {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a {
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a:hover {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Theme Toggle */
|
/* Theme Toggle */
|
||||||
@ -86,6 +115,12 @@ main {
|
|||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
|
padding-top: 64px;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
/* Should match the height of your nav */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sections */
|
/* Sections */
|
||||||
@ -96,8 +131,105 @@ section {
|
|||||||
|
|
||||||
/* Hero Section */
|
/* Hero Section */
|
||||||
.hero {
|
.hero {
|
||||||
text-align: center;
|
display: flex;
|
||||||
padding: 4rem 0;
|
align-items: center;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
margin-top: 64px;
|
||||||
|
/* Account for fixed header */
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
max-width: 540px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-screenshot {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-width: 600px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-stack {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive design */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.hero {
|
||||||
|
padding: 3rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-stack {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.hero {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
@ -156,7 +288,7 @@ section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.download-button {
|
.download-button {
|
||||||
background: var(--primary);
|
background: var(--primary-color);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@ -169,13 +301,69 @@ section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.download-button:hover {
|
.download-button:hover {
|
||||||
background: var(--primary-light);
|
transform: translateY(-2px);
|
||||||
|
background: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button .icon {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-text .primary {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-text .secondary {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Primary button style (can be used for other buttons too) */
|
||||||
|
.primary-button {
|
||||||
|
background: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:hover {
|
||||||
|
background: var(--secondary-color);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.size {
|
/* Secondary button style */
|
||||||
font-size: 0.875rem;
|
.secondary-button {
|
||||||
opacity: 0.8;
|
background: rgba(99, 102, 241, 0.1);
|
||||||
|
color: var(--primary-color);
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button:hover {
|
||||||
|
background: rgba(99, 102, 241, 0.2);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.download-options {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Installation Steps */
|
/* Installation Steps */
|
||||||
@ -187,18 +375,25 @@ section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.step {
|
.step {
|
||||||
background: var(--card);
|
background: var(--card-background);
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||||
|
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-number {
|
.step-number {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -1rem;
|
top: -1rem;
|
||||||
left: -1rem;
|
left: -1rem;
|
||||||
background: var(--primary);
|
background: var(--primary-color);
|
||||||
color: white;
|
color: white;
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
@ -207,6 +402,31 @@ section {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step h3 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step p {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode adjustments */
|
||||||
|
[data-theme="dark"] .step {
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
background: rgba(30, 41, 59, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.install-steps {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Keyboard Shortcuts */
|
/* Keyboard Shortcuts */
|
||||||
@ -246,29 +466,92 @@ section {
|
|||||||
|
|
||||||
/* FAQ Section */
|
/* FAQ Section */
|
||||||
.faq {
|
.faq {
|
||||||
margin-top: 2rem;
|
max-width: 800px;
|
||||||
|
margin: 4rem auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-item {
|
.faq-item {
|
||||||
border-bottom: 1px solid var(--border);
|
background: var(--card-background);
|
||||||
padding: 1rem 0;
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-question {
|
.faq-question {
|
||||||
font-weight: 600;
|
width: 100%;
|
||||||
cursor: pointer;
|
padding: 1.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: left;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-icon {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-item.active .faq-icon {
|
||||||
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-answer {
|
.faq-answer {
|
||||||
margin-top: 1rem;
|
max-height: 0;
|
||||||
display: none;
|
overflow: hidden;
|
||||||
|
transition: max-height 0.3s ease-out;
|
||||||
|
padding: 0 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-item.active .faq-answer {
|
.faq-item.active .faq-answer {
|
||||||
display: block;
|
max-height: 500px;
|
||||||
|
/* Adjust based on content */
|
||||||
|
padding: 0 1.5rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-answer p {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-answer ul {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-answer li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode adjustments */
|
||||||
|
[data-theme="dark"] .faq-item {
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
background: rgba(30, 41, 59, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.faq {
|
||||||
|
margin: 3rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-question {
|
||||||
|
padding: 1.25rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
@ -352,4 +635,330 @@ footer {
|
|||||||
height: auto;
|
height: auto;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-nav {
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
background: var(--card-background);
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .glass-nav {
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background: rgba(30, 41, 59, 0.8);
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-badge {
|
||||||
|
background: rgba(99, 102, 241, 0.1);
|
||||||
|
color: var(--primary-color);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
background: var(--card-background);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 2rem;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateY(-20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Features Section */
|
||||||
|
.features {
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
background: var(--card-background);
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||||
|
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card h3 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card p {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode adjustments */
|
||||||
|
[data-theme="dark"] .feature-card {
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
background: rgba(30, 41, 59, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.feature-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Styles */
|
||||||
|
.footer {
|
||||||
|
background: var(--card-background);
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 4rem 2rem 2rem;
|
||||||
|
margin-top: 4rem;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .footer {
|
||||||
|
background: rgba(30, 41, 59, 0.8);
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section h4 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-description {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links,
|
||||||
|
.tech-stack-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links li,
|
||||||
|
.tech-stack-list li {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a,
|
||||||
|
.tech-stack-list a {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a:hover,
|
||||||
|
.tech-stack-list a:hover {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .footer-bottom {
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom p {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart {
|
||||||
|
color: #ff4b4b;
|
||||||
|
display: inline-block;
|
||||||
|
animation: heartbeat 1.5s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coffee {
|
||||||
|
display: inline-block;
|
||||||
|
animation: wiggle 1s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes heartbeat {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wiggle {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: rotate(-10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: rotate(10deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.footer-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
padding: 3rem 1.5rem 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode adjustments */
|
||||||
|
[data-theme="dark"] .footer {
|
||||||
|
background: rgba(30, 41, 59, 0.8);
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Common card styles */
|
||||||
|
.feature-card,
|
||||||
|
.step,
|
||||||
|
.faq-item {
|
||||||
|
background: var(--card-background);
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode specific adjustments */
|
||||||
|
[data-theme="dark"] .feature-card,
|
||||||
|
[data-theme="dark"] .step,
|
||||||
|
[data-theme="dark"] .faq-item {
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
background: rgba(30, 41, 59, 0.8);
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover states */
|
||||||
|
.feature-card:hover,
|
||||||
|
.step:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-item.active {
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Optional: Add subtle hover effect to nav links */
|
||||||
|
.nav-links a {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--primary-color);
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a:hover::after {
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user