440 lines
14 KiB
CSS
440 lines
14 KiB
CSS
/* src/styles/theme.css */
|
|
|
|
/* Base Variables (Dark Mode Default) */
|
|
:root {
|
|
--bg-primary: #0f1219;
|
|
--bg-secondary: #161a24;
|
|
--bg-tertiary: #1e2330;
|
|
--bg-code: #1a1e2a;
|
|
--text-primary: #e2e8f0;
|
|
--text-secondary: #a0aec0;
|
|
--text-tertiary: #718096;
|
|
--accent-primary: #06b6d4; /* Cyan */
|
|
--accent-secondary: #3b82f6; /* Blue */
|
|
--accent-tertiary: #8b5cf6; /* Violet */
|
|
--glow-primary: rgba(6, 182, 212, 0.2);
|
|
--glow-secondary: rgba(59, 130, 246, 0.2);
|
|
--glow-tertiary: rgba(139, 92, 246, 0.2);
|
|
--border-primary: rgba(255, 255, 255, 0.1);
|
|
--border-secondary: rgba(255, 255, 255, 0.05);
|
|
--card-bg: rgba(24, 28, 44, 0.5);
|
|
--card-border: rgba(56, 189, 248, 0.2); /* Cyan border */
|
|
--ui-element: #1e293b;
|
|
--ui-element-hover: #334155;
|
|
--container-padding: clamp(1rem, 5vw, 3rem);
|
|
--font-size-xs: 0.75rem;
|
|
--font-size-sm: 0.875rem;
|
|
--font-size-md: 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;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--bg-primary-rgb: 15, 18, 25; /* RGB for gradients */
|
|
--bg-secondary-rgb: 22, 26, 36; /* RGB for gradients */
|
|
}
|
|
|
|
/* Enhanced Light Mode Variables - More tech-focused, less plain white */
|
|
:root.light-mode {
|
|
/* Base Colors - Rich, sophisticated cool neutral palette with blue undertones */
|
|
--bg-primary: #f0f4f8; /* Slightly cooler, less stark than pure white */
|
|
--bg-secondary: #e6edf5; /* Subtle blue-gray secondary that's visibly different */
|
|
--bg-tertiary: #d8e2f0; /* Deeper blue tint for tertiary with clear contrast */
|
|
--bg-code: #eaeff5; /* Distinctly colored code background for readability */
|
|
|
|
/* Text Colors - High contrast for exceptional readability */
|
|
--text-primary: #0b1b32; /* Near black with blue undertone - sharp contrast */
|
|
--text-secondary: #2d3e50; /* Rich blue-gray for secondary text with good readability */
|
|
--text-tertiary: #4a617a; /* Lighter blue-gray for tertiary text that's still readable */
|
|
|
|
/* Accent Colors - Deep, vibrant colors that pop against light backgrounds */
|
|
--accent-primary: #0277b6; /* Strong blue that stands out clearly */
|
|
--accent-secondary: #1e56b1; /* Deep, rich blue */
|
|
--accent-tertiary: #7132db; /* Vibrant violet with better contrast */
|
|
|
|
/* Enhanced Glows - More vibrant and visible */
|
|
--glow-primary: rgba(2, 119, 182, 0.25);
|
|
--glow-secondary: rgba(30, 86, 177, 0.25);
|
|
--glow-tertiary: rgba(113, 50, 219, 0.25);
|
|
|
|
/* Refined Borders - More defined with higher contrast */
|
|
--border-primary: rgba(30, 86, 177, 0.3); /* More visible blue-tinted borders */
|
|
--border-secondary: rgba(2, 119, 182, 0.2);
|
|
|
|
/* Card and UI Elements - More opaque for better definition */
|
|
--card-bg: rgba(255, 255, 255, 0.85); /* Less transparent for better contrast */
|
|
--card-border: rgba(30, 86, 177, 0.25); /* Stronger blue border */
|
|
--ui-element: rgba(230, 237, 245, 0.9); /* Less transparent UI elements */
|
|
--ui-element-hover: rgba(216, 226, 240, 0.95);
|
|
|
|
/* RGB values for gradients and advanced effects */
|
|
--bg-primary-rgb: 240, 244, 248; /* RGB for gradients */
|
|
--bg-secondary-rgb: 230, 237, 245; /* RGB for gradients */
|
|
|
|
/* Knowledge Graph specific enhancements - Critical improvements */
|
|
--graph-bg: rgba(240, 244, 248, 0.85); /* More opaque background */
|
|
--graph-border: rgba(30, 86, 177, 0.35); /* Stronger border */
|
|
--graph-node: #ffffff; /* Pure white for maximum contrast */
|
|
--graph-node-border: rgba(2, 119, 182, 0.8); /* Much more visible node borders */
|
|
--graph-line: rgba(113, 50, 219, 0.5); /* Higher opacity for clear connections */
|
|
--graph-highlight: rgba(2, 119, 182, 1); /* Full opacity for highlighted elements */
|
|
}
|
|
|
|
/* Ensure transitions for smooth theme changes */
|
|
*, *::before, *::after {
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
/* Knowledge Graph specific theme enhancements - Glassmorphism with better definition */
|
|
:root.light-mode .graph-container {
|
|
background: linear-gradient(135deg, rgba(240, 244, 248, 0.85), rgba(230, 237, 245, 0.9)); /* Gradient background instead of flat */
|
|
backdrop-filter: blur(15px);
|
|
border: 1px solid var(--graph-border);
|
|
box-shadow: 0 10px 30px rgba(30, 86, 177, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.7);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Enhanced node styling for much better visibility */
|
|
:root.light-mode .node {
|
|
background: var(--graph-node);
|
|
border: 2px solid var(--graph-node-border);
|
|
box-shadow: 0 4px 15px rgba(2, 119, 182, 0.25);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
:root.light-mode .node:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(2, 119, 182, 0.35);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
/* Connection lines with much better contrast */
|
|
:root.light-mode path.edge {
|
|
stroke: var(--graph-line) !important;
|
|
stroke-width: 1.5px !important;
|
|
}
|
|
|
|
:root.light-mode path.edge.highlighted {
|
|
stroke: var(--graph-highlight) !important;
|
|
stroke-width: 2.5px !important;
|
|
}
|
|
|
|
/* Node text labels with improved readability */
|
|
:root.light-mode .node-label {
|
|
color: var(--text-primary) !important;
|
|
background-color: rgba(255, 255, 255, 0.9) !important;
|
|
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
|
|
font-weight: 500 !important;
|
|
padding: 3px 8px !important;
|
|
border-radius: 4px !important;
|
|
border: 1px solid rgba(30, 86, 177, 0.15) !important;
|
|
}
|
|
|
|
:root.light-mode .node-details {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(15px);
|
|
box-shadow: 0 15px 35px rgba(2, 119, 182, 0.2);
|
|
border: 1px solid rgba(30, 86, 177, 0.25);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
:root.light-mode .graph-filters {
|
|
background: rgba(240, 244, 248, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(30, 86, 177, 0.25);
|
|
border-radius: 12px;
|
|
padding: 1rem;
|
|
box-shadow: 0 5px 15px rgba(30, 86, 177, 0.1);
|
|
}
|
|
|
|
:root.light-mode .graph-filter {
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border-primary);
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-radius: 8px;
|
|
padding: 0.5rem 1rem;
|
|
transition: all 0.2s ease;
|
|
font-weight: 500;
|
|
}
|
|
|
|
:root.light-mode .graph-filter:hover {
|
|
background: #ffffff;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(30, 86, 177, 0.15);
|
|
}
|
|
|
|
:root.light-mode .graph-filter.active {
|
|
background: linear-gradient(135deg, rgba(2, 119, 182, 0.15), rgba(30, 86, 177, 0.15));
|
|
border-color: rgba(30, 86, 177, 0.5);
|
|
box-shadow: 0 2px 10px rgba(30, 86, 177, 0.15);
|
|
color: var(--accent-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
:root.light-mode .connections-list a {
|
|
color: var(--accent-secondary);
|
|
transition: color 0.2s ease, transform 0.2s ease;
|
|
font-weight: 500;
|
|
}
|
|
|
|
:root.light-mode .connections-list a:hover {
|
|
color: var(--accent-primary);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
:root.light-mode .node-link {
|
|
box-shadow: 0 4px 15px rgba(2, 119, 182, 0.2);
|
|
background: linear-gradient(135deg, rgba(2, 119, 182, 0.1), rgba(30, 86, 177, 0.1));
|
|
border: 1px solid rgba(30, 86, 177, 0.25);
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
color: var(--accent-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
:root.light-mode .node-link:hover {
|
|
background: linear-gradient(135deg, rgba(2, 119, 182, 0.15), rgba(30, 86, 177, 0.15));
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(2, 119, 182, 0.25);
|
|
}
|
|
|
|
/* Fix for code blocks in light mode */
|
|
:root.light-mode pre,
|
|
:root.light-mode code {
|
|
background-color: var(--bg-code);
|
|
color: var(--text-secondary);
|
|
border: 1px solid rgba(30, 86, 177, 0.15);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
:root.light-mode code {
|
|
color: var(--accent-secondary);
|
|
padding: 0.2em 0.4em;
|
|
}
|
|
|
|
/* Services and Newsletter sections - More defined cards with depth */
|
|
:root.light-mode .service-card {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(30, 86, 177, 0.2);
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 25px rgba(30, 86, 177, 0.1);
|
|
transform: translateY(0);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
:root.light-mode .service-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 30px rgba(30, 86, 177, 0.15);
|
|
border-color: rgba(30, 86, 177, 0.3);
|
|
}
|
|
|
|
:root.light-mode .newsletter-container,
|
|
:root.light-mode .cta-container {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(15px);
|
|
border: 1px solid rgba(30, 86, 177, 0.25);
|
|
border-radius: 16px;
|
|
box-shadow: 0 15px 40px rgba(30, 86, 177, 0.15);
|
|
}
|
|
|
|
:root.light-mode .newsletter-input {
|
|
background: rgba(255, 255, 255, 1);
|
|
border: 1px solid rgba(30, 86, 177, 0.3);
|
|
border-radius: 8px;
|
|
padding: 0.75rem 1rem;
|
|
box-shadow: 0 2px 10px rgba(30, 86, 177, 0.08);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
:root.light-mode .newsletter-input:focus {
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 2px 15px rgba(2, 119, 182, 0.2);
|
|
outline: none;
|
|
}
|
|
|
|
/* Buttons with sophisticated gradient effects */
|
|
:root.light-mode button {
|
|
background: linear-gradient(135deg, rgba(240, 244, 248, 0.8), rgba(255, 255, 255, 1));
|
|
border: 1px solid rgba(30, 86, 177, 0.25);
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
:root.light-mode button:hover {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(240, 244, 248, 0.8));
|
|
border-color: rgba(30, 86, 177, 0.4);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(30, 86, 177, 0.15);
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
:root.light-mode .primary-button,
|
|
:root.light-mode .cta-primary-button {
|
|
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
|
|
color: white;
|
|
border: none;
|
|
box-shadow: 0 4px 15px rgba(30, 86, 177, 0.3);
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
:root.light-mode .primary-button:hover,
|
|
:root.light-mode .cta-primary-button:hover {
|
|
box-shadow: 0 6px 20px rgba(30, 86, 177, 0.4);
|
|
transform: translateY(-2px);
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
:root.light-mode .secondary-button,
|
|
:root.light-mode .cta-secondary-button {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(5px);
|
|
border: 1px solid rgba(30, 86, 177, 0.3);
|
|
color: var(--accent-secondary);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
:root.light-mode .secondary-button:hover,
|
|
:root.light-mode .cta-secondary-button:hover {
|
|
background: rgba(255, 255, 255, 1);
|
|
border-color: var(--accent-primary);
|
|
color: var(--accent-primary);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(2, 119, 182, 0.2);
|
|
}
|
|
|
|
/* Hero section with enhanced gradient background */
|
|
:root.light-mode .hero-section {
|
|
background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary));
|
|
border-bottom: 1px solid rgba(30, 86, 177, 0.15);
|
|
}
|
|
|
|
:root.light-mode .hero-bg {
|
|
background-image:
|
|
radial-gradient(circle at 20% 35%, rgba(2, 119, 182, 0.08) 0%, transparent 50%),
|
|
radial-gradient(circle at 75% 15%, rgba(30, 86, 177, 0.08) 0%, transparent 45%),
|
|
radial-gradient(circle at 85% 70%, rgba(113, 50, 219, 0.08) 0%, transparent 40%);
|
|
}
|
|
|
|
/* Enhanced light mode body background with subtle animated grid pattern */
|
|
:root.light-mode body {
|
|
background-color: var(--bg-primary);
|
|
background-image:
|
|
radial-gradient(circle at 20% 35%, rgba(2, 119, 182, 0.07) 0%, transparent 50%),
|
|
radial-gradient(circle at 75% 15%, rgba(30, 86, 177, 0.07) 0%, transparent 45%),
|
|
radial-gradient(circle at 85% 70%, rgba(113, 50, 219, 0.07) 0%, transparent 40%),
|
|
linear-gradient(rgba(30, 86, 177, 0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(30, 86, 177, 0.05) 1px, transparent 1px);
|
|
background-size: auto, auto, auto, 20px 20px, 20px 20px;
|
|
background-position: 0 0, 0 0, 0 0, center center, center center;
|
|
}
|
|
|
|
/* Blog specific enhancements */
|
|
:root.light-mode .blog-post-card {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(30, 86, 177, 0.2);
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 30px rgba(30, 86, 177, 0.1);
|
|
overflow: hidden;
|
|
transform: translateY(0);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
:root.light-mode .blog-post-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 40px rgba(30, 86, 177, 0.15);
|
|
border-color: rgba(30, 86, 177, 0.3);
|
|
}
|
|
|
|
:root.light-mode .blog-post-category {
|
|
background: linear-gradient(135deg, rgba(2, 119, 182, 0.15), rgba(30, 86, 177, 0.15));
|
|
color: var(--accent-primary);
|
|
border-radius: 4px;
|
|
padding: 0.25rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
:root.light-mode .blog-post-title {
|
|
color: var(--text-primary);
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
margin: 0.75rem 0;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
:root.light-mode .blog-post-card:hover .blog-post-title {
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
/* Blog post content styling */
|
|
:root.light-mode .blog-content {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(15px);
|
|
border: 1px solid rgba(30, 86, 177, 0.2);
|
|
border-radius: 16px;
|
|
box-shadow: 0 20px 60px rgba(30, 86, 177, 0.12);
|
|
padding: 2.5rem;
|
|
}
|
|
|
|
/* Navigation and header for light mode */
|
|
:root.light-mode .site-header {
|
|
background: rgba(240, 244, 248, 0.9);
|
|
backdrop-filter: blur(15px);
|
|
border-bottom: 1px solid rgba(30, 86, 177, 0.15);
|
|
box-shadow: 0 4px 20px rgba(30, 86, 177, 0.08);
|
|
}
|
|
|
|
:root.light-mode .nav-link {
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
:root.light-mode .nav-link:hover {
|
|
color: var(--accent-primary);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
:root.light-mode .nav-link.active {
|
|
color: var(--accent-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
:root.light-mode .theme-toggle {
|
|
background: rgba(230, 237, 245, 0.9);
|
|
border: 1px solid rgba(30, 86, 177, 0.2);
|
|
border-radius: 50%;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-secondary);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
:root.light-mode .theme-toggle:hover {
|
|
background: rgba(230, 237, 245, 1);
|
|
color: var(--accent-primary);
|
|
transform: rotate(15deg);
|
|
box-shadow: 0 2px 10px rgba(30, 86, 177, 0.15);
|
|
}
|
|
|
|
/* Footer styling */
|
|
:root.light-mode .site-footer {
|
|
background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary));
|
|
border-top: 1px solid rgba(30, 86, 177, 0.15);
|
|
padding: 3rem 0;
|
|
} |