/* Light theme — applied when . Test/experimental palette. */
[data-theme="light"] {
--color-navy: #f4f7fb;
--color-navy-light: #ffffff;
--gradient-hero: linear-gradient(135deg, #fcfdff 0%, #eef4ff 40%, #e6effa 70%, #f0f5fb 100%);
--shadow-glow: 0 0 40px rgba(59, 130, 246, 0.08);
}
/* Section-dark inversion */
[data-theme="light"] .section-dark {
background: var(--color-navy);
color: var(--color-gray-700);
}
[data-theme="light"] .section-dark.section-bordered-top {
border-top-color: var(--color-gray-200);
}
[data-theme="light"] .section-dark h2,
[data-theme="light"] .section-dark h3,
[data-theme="light"] .section-dark h4 {
color: var(--color-gray-900);
}
[data-theme="light"] .section-dark p {
color: var(--color-gray-600);
}
[data-theme="light"] .section-dark .section-tag {
color: var(--color-blue);
}
[data-theme="light"] .section-dark .section-subtitle {
color: var(--color-gray-500);
}
/* Hero (light bg) */
[data-theme="light"] .hero-title { color: var(--color-gray-900); }
[data-theme="light"] .hero-subtitle { color: var(--color-gray-600); }
[data-theme="light"] .hero-eyebrow { color: var(--color-blue); }
[data-theme="light"] .hero-scroll-hint { color: var(--color-gray-500); }
[data-theme="light"] .hero-scroll-hint .scroll-arrow {
border-color: var(--color-gray-400);
}
/* Solution metrics */
[data-theme="light"] .metric-value { color: var(--color-blue); }
[data-theme="light"] .metric-label,
[data-theme="light"] .solution-metrics .metric-label {
color: var(--color-gray-600);
}
/* Tech section content */
[data-theme="light"] .tech-pillar {
background: rgba(59, 130, 246, 0.05);
border-color: rgba(59, 130, 246, 0.15);
}
[data-theme="light"] .tech-pillar h4 { color: var(--color-gray-900); }
[data-theme="light"] .tech-pillar p { color: var(--color-gray-600); }
[data-theme="light"] .tech-pillar-list li { color: var(--color-gray-600); }
[data-theme="light"] .tech-pillar-list strong { color: var(--color-gray-900); }
[data-theme="light"] .signal-item strong { color: var(--color-gray-900); }
[data-theme="light"] .signal-item span { color: var(--color-gray-600); }
/* Tech diagram (legacy div-based, kept for safety) */
[data-theme="light"] .diagram-ring {
border-color: rgba(59, 130, 246, 0.25);
color: var(--color-gray-700);
}
[data-theme="light"] .diagram-ring-inner {
color: var(--color-gray-900);
background: rgba(59, 130, 246, 0.08);
}
/* Tech diagram (SVG with textPath labels) */
[data-theme="light"] .tech-diagram-svg {
color: var(--color-gray-700);
}
[data-theme="light"] .diagram-ring-outer-svg { stroke: rgba(59, 130, 246, 0.32); }
[data-theme="light"] .diagram-ring-mid-svg { stroke: rgba(6, 182, 212, 0.42); }
[data-theme="light"] .diagram-ring-inner-svg {
fill: rgba(59, 130, 246, 0.08);
stroke: rgba(59, 130, 246, 0.5);
}
[data-theme="light"] .diagram-inner-svg { fill: var(--color-blue); }
[data-theme="light"] .diagram-pulse-svg { stroke: rgba(59, 130, 246, 0.35); }
/* Library scenario stack */
[data-theme="light"] .library-stack { color: var(--color-gray-500); }
/* Biometric capture event-alignment diagram (lives in section-dark which
is a light surface in light mode — bump trace contrast). */
[data-theme="light"] .event-alignment-svg { color: var(--color-gray-600); }
/* Solution signal-traces panel */
[data-theme="light"] .signal-traces { color: var(--color-gray-600); }
/* Contact illustration */
[data-theme="light"] .contact-illustration { color: var(--color-gray-600); }
[data-theme="light"] .contact-illustration circle[fill="var(--color-white)"] {
fill: #ffffff;
}
/* Platform feature cards */
[data-theme="light"] .platform-feature {
border-color: rgba(59, 130, 246, 0.12);
background: rgba(59, 130, 246, 0.03);
}
[data-theme="light"] .platform-feature:hover {
background: rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.25);
}
[data-theme="light"] .platform-feature p {
color: var(--color-gray-600);
}
[data-theme="light"] .pf-icon { color: var(--color-blue); }
/* Feature cards on vertical subpages */
[data-theme="light"] .feature-card {
background: rgba(59, 130, 246, 0.04);
border-color: rgba(59, 130, 246, 0.15);
}
[data-theme="light"] .feature-card p { color: var(--color-gray-600); }
/* Nav in light mode — flip the dark navy backdrop to a light translucent one */
[data-theme="light"] .site-nav {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .site-nav.scrolled {
background: rgba(255, 255, 255, 0.92);
border-bottom-color: var(--color-gray-200);
}
[data-theme="light"] .nav-links a {
color: var(--color-gray-700);
}
[data-theme="light"] .nav-links a:hover {
color: var(--color-gray-900);
}
[data-theme="light"] .nav-toggle span {
background: var(--color-gray-700);
}
[data-theme="light"] .nav-cta-outline {
border-color: var(--color-gray-300);
}
[data-theme="light"] .nav-cta-outline:hover {
border-color: var(--color-gray-400);
background: rgba(15, 23, 42, 0.04);
}
/* Solutions dropdown in light mode */
[data-theme="light"] .nav-dropdown-menu {
background: rgba(255, 255, 255, 0.98);
border-color: var(--color-gray-200);
box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .nav-dropdown-menu a {
color: var(--color-gray-700) !important;
}
[data-theme="light"] .nav-dropdown-menu a:hover {
background: rgba(59, 130, 246, 0.08);
color: var(--color-gray-900) !important;
}
/* Hero vertical cards in light mode */
[data-theme="light"] .hero-vertical-card {
background: rgba(255, 255, 255, 0.7);
border-color: var(--color-gray-200);
color: var(--color-gray-800);
}
[data-theme="light"] .hero-vertical-card:hover {
background: rgba(255, 255, 255, 0.95);
border-color: var(--color-blue);
color: var(--color-gray-900);
}
[data-theme="light"] .hero-secondary a {
color: var(--color-gray-600);
}
[data-theme="light"] .hero-secondary a:hover { color: var(--color-gray-900); }
/* Logo inversion in dark mode — current logo is dark text on transparent,
so it disappears on dark navy. Invert + hue-rotate keeps blue glyphs blue
while flipping the black text to white. Default theme is light, so this
only triggers when the user toggles to dark. */
[data-theme="dark"] .nav-logo-img,
[data-theme="dark"] .footer-logo {
filter: invert(1) hue-rotate(180deg);
}
/* Footer (currently dark) — flip to light card */
[data-theme="light"] .site-footer {
background: var(--color-gray-50);
border-top: 1px solid var(--color-gray-200);
}
[data-theme="light"] .site-footer h4 { color: var(--color-gray-900); }
[data-theme="light"] .site-footer p,
[data-theme="light"] .site-footer a,
[data-theme="light"] .footer-bottom span {
color: var(--color-gray-600);
}
[data-theme="light"] .site-footer a:hover { color: var(--color-blue); }
[data-theme="light"] .footer-bottom {
border-top-color: var(--color-gray-200);
}
/* Theme toggle button (visible in both modes) */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
background: transparent;
border: 1px solid rgba(148, 163, 184, 0.3);
border-radius: var(--radius-full);
color: inherit;
cursor: pointer;
transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.theme-toggle:hover {
background: rgba(148, 163, 184, 0.1);
border-color: rgba(148, 163, 184, 0.5);
}
.theme-toggle svg { display: block; }
/* Show the icon that matches "switch to other theme" */
.theme-icon-light { display: none; }
.theme-icon-dark { display: block; }
[data-theme="light"] .theme-icon-light { display: block; }
[data-theme="light"] .theme-icon-dark { display: none; }