/* Nemesis Mode overrides
Applies when is set
*/
html[data-nemesis="on"] {
/* Variables tuned for high-contrast neon aesthetic */
--bg-color: #02040b;
--bg-gradient: radial-gradient(circle at 30% 20%, rgba(255,0,80,0.06), transparent 40%),
radial-gradient(circle at 70% 80%, rgba(0,255,255,0.06), transparent 40%),
linear-gradient(135deg, #050712 0%, #0a0f24 50%, #060a18 100%);
--text-color: #e6f7ff;
--text-muted: #88a9ff;
--accent-color: #00ffff; /* cyan */
--accent-glow: rgba(0,255,255,0.35);
--secondary-accent: #ff0050; /* magenta */
--secondary-glow: rgba(255,0,80,0.25);
--card-bg: rgba(255,255,255,0.04);
--card-border: rgba(0,255,255,0.18);
--glass-bg: rgba(255,255,255,0.06);
--glass-border: rgba(0,255,255,0.22);
--header-bg: linear-gradient(135deg, rgba(0,255,255,0.12), rgba(255,0,80,0.12));
}
/* Use a mono, terminal-like font in Nemesis Mode */
html[data-nemesis="on"] body,
html[data-nemesis="on"] button,
html[data-nemesis="on"] input,
html[data-nemesis="on"] textarea,
html[data-nemesis="on"] select {
font-family: 'Courier New', Courier, monospace !important;
letter-spacing: 0.2px;
}
/* Subtle VHS grain + vignette only in Nemesis mode */
html[data-nemesis="on"] body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1; /* sits above background, below content */
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255, 255, 255, 0.03) 2px,
rgba(255, 255, 255, 0.03) 4px
);
animation: nm-grain 0.25s infinite linear;
}
html[data-nemesis="on"] body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.6) 100%);
}
@keyframes nm-grain {
0% { transform: translate(0, 0); }
25% { transform: translate(-1px, 1px); }
50% { transform: translate(1px, -1px); }
75% { transform: translate(1px, 1px); }
100% { transform: translate(0, 0); }
}
/* Anaglyph accent on key headings */
html[data-nemesis="on"] header h1,
html[data-nemesis="on"] section h2 {
text-shadow: -1px 0 0 #ff0050, 1px 0 0 #00ffff;
}
/* Make the chevron match the mode (if visible on desktop) */
html[data-nemesis="on"] .chevron {
color: var(--accent-color);
border-color: var(--glass-border);
box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 60px var(--secondary-glow);
}
/* Nav scrolled state tuned for this palette */
html[data-nemesis="on"] nav.scrolled {
background: rgba(5, 10, 24, 0.9);
box-shadow: 0 4px 20px rgba(0, 255, 255, 0.08);
}