diff --git a/src/app.html b/src/app.html
index 8e7eacc1..56ab8123 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,7 +2,8 @@
-
+
+
Context Engine - MCP Retrieval Stack
diff --git a/src/app.scss b/src/app.scss
index 23a925f8..ce1646dd 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -109,36 +109,24 @@ body::before {
.logo {
display: flex;
align-items: center;
- gap: 12px;
+ gap: 10px;
font-weight: 600;
font-size: 17px;
color: var(--text-primary);
text-decoration: none;
}
-.logo-icon {
- width: 32px;
- height: 32px;
- background: var(--accent-gradient);
- border-radius: 8px;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0 6px 16px rgba(0, 184, 148, 0.25);
+.logo-icon-img {
+ width: 28px;
+ height: 28px;
+ border-radius: 6px;
transition: all var(--transition);
}
-.logo:hover .logo-icon {
- box-shadow: 0 8px 20px rgba(0, 184, 148, 0.35);
+.logo:hover .logo-icon-img {
transform: translateY(-1px);
}
-.logo-icon :global(svg) {
- width: 18px;
- height: 18px;
- fill: white;
-}
-
.nav {
display: flex;
gap: 28px;
@@ -325,6 +313,56 @@ body::before {
align-items: center;
}
+/* Hero brand block: logo + badge centered together */
+.hero-brand {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 28px;
+}
+
+.hero-logo {
+ width: auto;
+ height: 120px;
+ max-width: 100%;
+ margin-bottom: 12px;
+ filter: drop-shadow(0 4px 24px rgba(0, 184, 148, 0.15));
+ transition: all var(--transition);
+ object-fit: contain;
+}
+
+/* Show appropriate logo based on theme */
+[data-theme="light"] .hero-logo {
+ content: url('/Context-Engine/logo.svg');
+}
+
+/* NVIDIA Inception Badge */
+.nvidia-badge-link {
+ display: inline-block;
+ transition: opacity var(--transition);
+}
+
+.nvidia-badge-link:hover {
+ opacity: 0.85;
+}
+
+.nvidia-badge {
+ height: 48px;
+ width: auto;
+}
+
+@media (max-width: 768px) {
+ .nvidia-badge {
+ height: 38px;
+ }
+}
+
+@media (max-width: 400px) {
+ .nvidia-badge {
+ height: 30px;
+ }
+}
+
.kicker {
font-size: 12px;
letter-spacing: 0.15em;
@@ -913,6 +951,7 @@ body::before {
gap: 48px;
}
.hero-title { font-size: 40px; }
+ .hero-logo { height: 90px; }
.nav { display: none; }
.features-grid { grid-template-columns: 1fr; }
.graph-section, .features-section, .demo-section { padding: 60px 24px; }
@@ -1034,6 +1073,11 @@ body::before {
font-size: 32px;
line-height: 1.2;
}
+
+ .hero-logo {
+ height: 72px;
+ max-width: 100%;
+ }
.hero-subtitle {
font-size: 15px;
@@ -1227,6 +1271,40 @@ body::before {
}
}
+/* Very small phones */
+@media (max-width: 400px) {
+ .hero {
+ padding: 32px 12px;
+ }
+
+ .hero-logo {
+ height: auto;
+ max-width: 100%;
+ }
+
+ .hero-title {
+ font-size: 26px;
+ }
+
+ .hero-subtitle {
+ font-size: 14px;
+ }
+
+ .header {
+ padding: 0 12px;
+ }
+
+ .logo {
+ font-size: 15px;
+ gap: 8px;
+ }
+
+ .logo-icon-img {
+ width: 24px;
+ height: 24px;
+ }
+}
+
/* Glass morphism utility classes (kept for contact page compatibility) */
.glass {
background: var(--bg-card);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c8dfb620..d459c8e9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,7 +3,7 @@
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { base } from '$app/paths';
- import { Sun, Moon, Mail, Github, Layers, Menu, X, Key, LogIn } from 'lucide-svelte';
+ import { Sun, Moon, Mail, Github, Menu, X, Key, LogIn } from 'lucide-svelte';
const loginUrl = import.meta.env.VITE_CTX_LOGIN_URL || `${base}/login`;
@@ -62,9 +62,7 @@
Context Engine
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a894aeda..e8675201 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@