OpenZIM MCP Server
by cameronrye
- openzim-mcp
- website
- assets
styles.css•29.1 kB
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Light Mode Colors */
--primary-color: #2563eb;
--primary-dark: #1d4ed8;
--secondary-color: #10b981;
--accent-color: #f59e0b;
--accent-primary: #2563eb;
--text-primary: #1f2937;
--text-secondary: #6b7280;
--text-light: #9ca3af;
--bg-primary: #ffffff;
--bg-secondary: #f9fafb;
--bg-card: #ffffff;
--bg-code: #111827;
--border-color: #e5e7eb;
--success-color: #10b981;
--gradient-primary: linear-gradient(135deg, #2563eb 0%, #10b981 100%);
--gradient-secondary: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
--hero-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
--navbar-bg: rgba(255, 255, 255, 0.95);
--navbar-bg-scroll: rgba(255, 255, 255, 0.98);
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* Transitions */
--transition-fast: 0.15s ease-in-out;
--transition-normal: 0.3s ease-in-out;
--transition-slow: 0.5s ease-in-out;
--transition-theme: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Dark Mode Colors */
[data-theme="dark"] {
--primary-color: #3b82f6;
--primary-dark: #2563eb;
--secondary-color: #10b981;
--accent-color: #f59e0b;
--accent-primary: #3b82f6;
--text-primary: #f9fafb;
--text-secondary: #d1d5db;
--text-light: #9ca3af;
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-card: #1e293b;
--bg-code: #0f172a;
--border-color: #334155;
--success-color: #10b981;
--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
--gradient-secondary: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
--hero-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
--navbar-bg: rgba(15, 23, 42, 0.95);
--navbar-bg-scroll: rgba(15, 23, 42, 0.98);
/* Dark mode shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
html {
scroll-behavior: smooth;
transition: var(--transition-theme);
}
body {
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--text-primary);
background-color: var(--bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: color var(--transition-theme), background-color var(--transition-theme);
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--navbar-bg);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
z-index: 1000;
transition: background var(--transition-normal), border-color var(--transition-theme);
}
/* Skip to main content link for accessibility */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--primary-color);
color: white;
padding: 8px;
text-decoration: none;
border-radius: 4px;
z-index: 1001;
transition: top var(--transition-fast);
}
.skip-link:focus {
top: 6px;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
display: flex;
align-items: center;
justify-content: space-between;
height: 70px;
}
.nav-logo {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-weight: 700;
font-size: var(--font-size-xl);
color: var(--text-primary);
text-decoration: none;
}
.logo-icon {
width: 32px;
height: 32px;
color: var(--primary-color);
transition: color var(--transition-theme);
}
.nav-menu {
display: flex;
align-items: center;
gap: var(--spacing-xl);
}
.nav-link {
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
transition: var(--transition-fast);
position: relative;
}
.nav-link:hover {
color: var(--primary-color);
}
.nav-link-github {
background: var(--gradient-primary);
color: white !important;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.nav-link-github:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Theme Toggle */
.theme-toggle {
background: none;
border: 2px solid var(--border-color);
border-radius: var(--radius-lg);
padding: var(--spacing-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
transition: all var(--transition-fast);
color: var(--text-secondary);
margin-left: var(--spacing-md);
}
.theme-toggle:hover {
border-color: var(--primary-color);
color: var(--primary-color);
transform: scale(1.05);
}
.theme-toggle:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.theme-icon {
font-size: 1.25rem;
transition: transform var(--transition-fast);
}
.theme-toggle:hover .theme-icon {
transform: rotate(180deg);
}
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
gap: 4px;
}
.bar {
width: 25px;
height: 3px;
background-color: var(--text-primary);
transition: var(--transition-fast);
border-radius: 2px;
}
/* Hero Section */
.hero {
padding: 120px 0 80px;
background: var(--hero-bg);
position: relative;
overflow: hidden;
transition: background var(--transition-theme);
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
opacity: 0.5;
}
.hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-3xl);
align-items: center;
position: relative;
z-index: 1;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
background: rgba(37, 99, 235, 0.1);
color: var(--primary-color);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-xl);
font-size: var(--font-size-sm);
font-weight: 600;
margin-bottom: var(--spacing-lg);
}
.hero-title {
font-size: var(--font-size-5xl);
font-weight: 800;
line-height: 1.1;
margin-bottom: var(--spacing-lg);
color: var(--text-primary);
}
.gradient-text {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: var(--font-size-xl);
color: var(--text-secondary);
margin-bottom: var(--spacing-2xl);
line-height: 1.7;
}
.hero-buttons {
display: flex;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-3xl);
}
.btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-xl);
border-radius: var(--radius-lg);
font-weight: 600;
text-decoration: none;
transition: var(--transition-normal);
border: none;
cursor: pointer;
font-size: var(--font-size-base);
}
.btn-primary {
background: var(--gradient-primary);
color: white;
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.btn-secondary {
background: white;
color: var(--text-primary);
border: 2px solid var(--border-color);
}
.btn-secondary:hover {
border-color: var(--primary-color);
color: var(--primary-color);
transform: translateY(-1px);
}
.hero-stats {
display: flex;
gap: var(--spacing-2xl);
}
.stat {
text-align: center;
}
.stat-number {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--primary-color);
margin-bottom: var(--spacing-xs);
transition: opacity var(--transition-fast), color var(--transition-theme);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-weight: 500;
}
/* Code Window */
.hero-visual {
position: relative;
}
.code-window {
background: var(--bg-code);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
transition: transform var(--transition-slow), background var(--transition-theme), box-shadow var(--transition-theme);
}
.code-window:hover {
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.code-header {
background: #1f2937;
padding: var(--spacing-md);
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #374151;
}
.code-dots {
display: flex;
gap: var(--spacing-xs);
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.dot.red { background: #ef4444; }
.dot.yellow { background: #f59e0b; }
.dot.green { background: #10b981; }
.code-title {
color: #9ca3af;
font-size: var(--font-size-sm);
font-weight: 500;
}
.code-content {
padding: var(--spacing-lg);
}
.code-content pre {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
line-height: 1.6;
color: #e5e7eb;
overflow-x: auto;
}
/* Sections */
.section-header {
text-align: center;
margin-bottom: var(--spacing-3xl);
}
.section-title {
font-size: var(--font-size-4xl);
font-weight: 800;
margin-bottom: var(--spacing-lg);
color: var(--text-primary);
}
.section-description {
font-size: var(--font-size-lg);
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}
/* Features Section */
.features {
padding: var(--spacing-3xl) 0;
background: var(--bg-primary);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-xl);
}
.feature-card {
background: var(--bg-card);
padding: var(--spacing-2xl);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
transition: transform var(--transition-normal), box-shadow var(--transition-normal),
background var(--transition-theme), border-color var(--transition-theme);
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.feature-icon {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-lg);
display: block;
}
.feature-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
.feature-description {
color: var(--text-secondary);
line-height: 1.7;
}
/* Smart Retrieval System Section */
.smart-retrieval {
padding: var(--spacing-3xl) 0;
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}
.smart-retrieval-content {
display: grid;
gap: var(--spacing-3xl);
margin-top: var(--spacing-2xl);
}
.retrieval-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-xl);
}
.retrieval-feature {
background: var(--bg-card);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.retrieval-feature:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-color: var(--accent-primary);
}
.retrieval-icon {
font-size: 2.5rem;
margin-bottom: var(--spacing-md);
}
.retrieval-title {
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
}
.retrieval-description {
color: var(--text-secondary);
line-height: 1.6;
}
.retrieval-example {
background: var(--bg-card);
padding: var(--spacing-2xl);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
}
.example-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing-lg);
color: var(--text-primary);
}
/* Security Features Section */
.security {
padding: var(--spacing-3xl) 0;
background: var(--bg-secondary);
}
.security-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
}
.security-feature {
background: var(--bg-card);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.security-feature:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border-color: var(--accent-primary);
}
.security-icon {
font-size: 2.5rem;
margin-bottom: var(--spacing-md);
}
.security-title {
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
}
.security-description {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: var(--spacing-md);
}
.security-details {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
.security-tag {
background: var(--accent-primary);
color: white;
padding: 4px 8px;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: 600;
}
.security-status {
color: var(--success-color);
font-size: var(--font-size-sm);
font-weight: 600;
}
.security-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-3xl);
padding-top: var(--spacing-2xl);
border-top: 1px solid var(--border-color);
}
.security-stat {
text-align: center;
}
.security-stat .stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--accent-primary);
margin-bottom: var(--spacing-xs);
}
.security-stat .stat-label {
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 600;
}
/* Advanced Features Section */
.advanced-features {
padding: var(--spacing-3xl) 0;
background: var(--bg-primary);
}
.advanced-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-2xl);
margin-top: var(--spacing-2xl);
}
.advanced-feature {
background: var(--bg-card);
padding: var(--spacing-2xl);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.advanced-feature:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
border-color: var(--accent-primary);
}
.advanced-icon {
font-size: 3rem;
margin-bottom: var(--spacing-lg);
}
.advanced-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
.advanced-description {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: var(--spacing-lg);
}
.advanced-list {
list-style: none;
padding: 0;
margin: 0;
}
.advanced-list li {
position: relative;
padding-left: var(--spacing-lg);
margin-bottom: var(--spacing-sm);
color: var(--text-secondary);
line-height: 1.5;
}
.advanced-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--success-color);
font-weight: 700;
}
/* Developer Experience Section */
.developer-experience {
padding: var(--spacing-3xl) 0;
background: var(--bg-secondary);
}
.dev-experience-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
}
.dev-feature {
background: var(--bg-card);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.dev-feature:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-color: var(--accent-primary);
}
.dev-icon {
font-size: 2.5rem;
margin-bottom: var(--spacing-md);
}
.dev-title {
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
}
.dev-description {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: var(--spacing-md);
}
.dev-tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
}
.dev-tag {
background: var(--accent-primary);
color: white;
padding: 4px 8px;
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: 600;
}
.dev-workflow {
margin-top: var(--spacing-3xl);
padding-top: var(--spacing-2xl);
border-top: 1px solid var(--border-color);
}
.workflow-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing-lg);
color: var(--text-primary);
}
/* Installation Section */
.installation {
padding: var(--spacing-3xl) 0;
background: var(--bg-primary);
}
.installation-steps {
display: grid;
gap: var(--spacing-2xl);
}
.step {
display: flex;
gap: var(--spacing-xl);
align-items: flex-start;
}
.step-number {
width: 50px;
height: 50px;
background: var(--gradient-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.step-content {
flex: 1;
}
.step-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
/* Development Installation */
.dev-install {
margin-top: var(--spacing-3xl);
padding-top: var(--spacing-2xl);
border-top: 1px solid var(--border-color);
}
.dev-install-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
.dev-install-description {
color: var(--text-secondary);
margin-bottom: var(--spacing-lg);
line-height: 1.6;
}
/* Code Blocks */
.code-block {
position: relative;
background: var(--bg-code);
border-radius: var(--radius-lg);
overflow: hidden;
margin-top: var(--spacing-md);
transition: background var(--transition-theme);
}
.copy-btn {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
background: rgba(255, 255, 255, 0.1);
border: none;
color: white;
padding: var(--spacing-sm);
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition-fast);
z-index: 10;
}
.copy-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.code-block pre {
padding: var(--spacing-lg);
font-family: var(--font-mono);
font-size: var(--font-size-sm);
line-height: 1.6;
color: #e5e7eb;
overflow-x: auto;
margin: 0;
}
/* Usage Section */
.usage {
padding: var(--spacing-3xl) 0;
background: var(--bg-primary);
}
/* Documentation Section */
.documentation {
padding: var(--spacing-3xl) 0;
background: var(--bg-secondary);
}
.docs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
}
.doc-card {
background: var(--bg-card);
padding: var(--spacing-2xl);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
transition: transform var(--transition-normal), box-shadow var(--transition-normal),
background var(--transition-theme), border-color var(--transition-theme);
text-align: center;
}
.doc-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.doc-icon {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-lg);
display: block;
}
.doc-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
.doc-description {
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: var(--spacing-lg);
}
.doc-link {
display: inline-flex;
align-items: center;
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: var(--transition-fast);
}
.doc-link:hover {
color: var(--primary-dark);
transform: translateX(4px);
}
.usage-tabs {
max-width: 800px;
margin: 0 auto;
}
.tab-buttons {
display: flex;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xl);
border-bottom: 1px solid var(--border-color);
}
.tab-btn {
background: none;
border: none;
padding: var(--spacing-md) var(--spacing-lg);
font-size: var(--font-size-base);
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: var(--transition-fast);
}
.tab-btn.active,
.tab-btn:hover {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
.tab-content {
position: relative;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.example-block {
margin-bottom: var(--spacing-xl);
}
.example-block h4 {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
.example-result {
margin-top: var(--spacing-lg);
padding: var(--spacing-lg);
background: var(--bg-secondary);
border-radius: var(--radius-lg);
border-left: 4px solid var(--secondary-color);
}
.example-result h5 {
font-size: var(--font-size-base);
font-weight: 600;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
}
.example-result pre {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
white-space: pre-wrap;
}
/* Footer */
.footer {
background: var(--bg-code);
color: white;
padding: var(--spacing-3xl) 0 var(--spacing-xl);
transition: background var(--transition-theme);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
}
.footer-logo {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-weight: 700;
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-md);
}
.footer-description {
color: #9ca3af;
line-height: 1.7;
}
.footer-title {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-md);
color: white;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: var(--spacing-sm);
}
.footer-links a {
color: #9ca3af;
text-decoration: none;
transition: var(--transition-fast);
}
.footer-links a:hover {
color: var(--primary-color);
}
.footer-license {
color: #9ca3af;
margin-bottom: var(--spacing-md);
}
.footer-license a {
color: var(--primary-color);
text-decoration: none;
}
.footer-badges {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.footer-badges img {
height: 20px;
}
.footer-bottom {
border-top: 1px solid #374151;
padding-top: var(--spacing-xl);
text-align: center;
color: #9ca3af;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
top: 70px;
left: -100%;
width: 100%;
height: calc(100vh - 70px);
background: var(--bg-primary);
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-top: var(--spacing-2xl);
transition: left var(--transition-normal), background var(--transition-theme);
box-shadow: var(--shadow-lg);
gap: var(--spacing-lg);
}
.nav-menu.active {
left: 0;
}
.nav-link {
padding: var(--spacing-md);
font-size: var(--font-size-lg);
min-height: 44px;
display: flex;
align-items: center;
}
.theme-toggle {
margin-left: 0;
margin-top: var(--spacing-md);
}
.nav-toggle {
display: flex;
}
.nav-toggle.active .bar:nth-child(2) {
opacity: 0;
}
.nav-toggle.active .bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active .bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.hero .container {
grid-template-columns: 1fr;
gap: var(--spacing-2xl);
text-align: center;
}
.hero-title {
font-size: var(--font-size-3xl);
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.hero-stats {
justify-content: center;
}
.code-window {
transform: none;
}
.features-grid {
grid-template-columns: 1fr;
}
.step {
flex-direction: column;
text-align: center;
}
.tab-buttons {
flex-wrap: wrap;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
}
@media (max-width: 480px) {
.container {
padding: 0 var(--spacing-md);
}
.hero {
padding: 100px 0 60px;
}
.hero-title {
font-size: var(--font-size-2xl);
line-height: 1.2;
}
.hero-description {
font-size: var(--font-size-base);
}
.hero-stats {
flex-direction: column;
gap: var(--spacing-lg);
align-items: center;
}
.section-title {
font-size: var(--font-size-2xl);
}
.feature-card {
padding: var(--spacing-lg);
}
.btn {
width: 100%;
justify-content: center;
min-height: 48px;
}
.hero-buttons {
flex-direction: column;
width: 100%;
}
.tab-buttons {
flex-direction: column;
gap: var(--spacing-xs);
}
.tab-btn {
width: 100%;
text-align: center;
}
}
/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.code-window {
transform: none !important;
}
.theme-toggle:hover .theme-icon {
transform: none !important;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:root {
--border-color: #000000;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] {
--border-color: #ffffff;
--text-secondary: #ffffff;
}
}
/* Beating Heart Animation */
.beating-heart {
display: inline-block;
animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
0%, 100% {
transform: scale(1);
}
10%, 30% {
transform: scale(1.1);
}
20%, 40% {
transform: scale(1);
}
}
Latest Blog Posts
- Federated Learning with MCP: Building Privacy-Preserving Agents Across Distributed EdgesBy Om-Shree-0709 on .SecuremcpLearning
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/cameronrye/openzim-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server