From b528ddf31b3c0800ae7a4b1eaef1828efce4657f Mon Sep 17 00:00:00 2001 From: chris-stinemetz Date: Fri, 27 Feb 2026 08:02:03 -0500 Subject: [PATCH] feat: new logo, favicon, and NVIDIA Inception badge - Replace favicon.svg with new brand favicon.png (32x32) - Add apple-touch-icon.png (180x180) for iOS - Add logo SVG/PNG variants (color + white) to static/ - Update hero section with large brand logo and NVIDIA badge - Header uses favicon icon + text for compact nav branding - NVIDIA Inception badge centered under logo, links to nvidia.com - Full responsive support (desktop/tablet/mobile/small phone) - Theme-aware: white logo on dark, color logo on light --- src/app.html | 3 +- src/app.scss | 114 +++++++++++++++++++++++++----- src/routes/+layout.svelte | 6 +- src/routes/+page.svelte | 59 ++++++++++------ static/apple-touch-icon.png | Bin 0 -> 11133 bytes static/favicon.png | Bin 0 -> 885 bytes static/favicon.svg | 1 - static/logo-white.png | Bin 0 -> 98751 bytes static/logo-white.svg | 8 +++ static/logo.png | Bin 0 -> 111658 bytes static/logo.svg | 9 +++ static/nvidia-inception-badge.png | Bin 0 -> 4039 bytes 12 files changed, 155 insertions(+), 45 deletions(-) create mode 100644 static/apple-touch-icon.png create mode 100644 static/favicon.png delete mode 100644 static/favicon.svg create mode 100644 static/logo-white.png create mode 100644 static/logo-white.svg create mode 100644 static/logo.png create mode 100644 static/logo.svg create mode 100644 static/nvidia-inception-badge.png 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 @@
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 @@