/* nemoguardian themes.css — shared design tokens + 5 themes + theme switcher * * Loaded by every page on carlos-debrief. Page-specific CSS should reference * `var(--token-name)` instead of hard-coding colors so themes swap cleanly. * * Themes (in switcher order): * github-dark — default, GitHub dark palette * cyber — Matrix-style neon green on pure black * modern — sleek light theme with subtle accents * dark-mono — pure monochrome dark, monospace everywhere * light — bright daylight theme with warm neutrals * * Usage in HTML: * * * */ /* ---------------------------------------------------------------- */ /* github-dark — default */ /* ---------------------------------------------------------------- */ :root, :root[data-theme="github-dark"] { /* base surfaces */ --bg: #0d1117; --bg-elevated: #161b22; --bg-overlay: rgba(1, 4, 9, 0.85); --border: #30363d; --border-strong: #484f58; --border-soft: #21262d; /* text */ --text: #c9d1d9; --text-bright: #f0f6fc; --text-muted: #8b949e; --text-subtle: #6e7681; /* accents */ --accent: #58a6ff; --accent-hover: #79c0ff; --accent-green: #3fb950; --accent-orange: #f0883e; --accent-purple: #d2a8ff; --accent-pink: #ff7b72; --accent-yellow: #d29922; /* semantic */ --bg-card: var(--bg-elevated); --border-card: var(--border-soft); --tag-bg: #21262d; --shadow-card: 0 8px 24px rgba(88, 166, 255, 0.08); --shadow-modal: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(88, 166, 255, 0.18); /* typography */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading: var(--font-body); --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* card accents (for category borders) */ --cat-1: #58a6ff; /* blue — AI */ --cat-2: #3fb950; /* green — security */ --cat-3: #d2a8ff; /* purple — web */ --cat-4: #f0883e; /* orange — news */ --cat-5: #ff7b72; /* red — quantum/hacking */ --cat-6: #d29922; /* yellow — blockchain */ color-scheme: dark; } /* ---------------------------------------------------------------- */ /* cyber — Matrix green on black */ /* Inspired by the "Matrix digital rain" / Hermes desktop */ /* cyberpunk terminal aesthetic. Pure black bg, neon green */ /* text, occasional amber glyph accents. */ /* ---------------------------------------------------------------- */ :root[data-theme="cyber"] { --bg: #000000; /* pure black */ --bg-elevated: #050a05; /* very dark green-black */ --bg-overlay: rgba(0, 0, 0, 0.92); --border: #00ff4122; /* faint green */ --border-strong: #00ff41; /* matrix green */ --border-soft: #00ff4111; --text: #00ff41; /* primary matrix green */ --text-bright: #c8ffc8; /* bright phosphor green */ --text-muted: #00b328; /* dimmer green */ --text-subtle: #006e18; /* very dim green */ --accent: #00ff41; /* primary matrix green */ --accent-hover: #c8ffc8; /* bright phosphor */ --accent-green: #00ff41; --accent-orange: #ffaa00; /* amber accent for warnings */ --accent-purple: #aa00ff; --accent-pink: #ff0040; /* alert red-pink */ --accent-yellow: #ffe600; /* bright yellow highlight */ --bg-card: #050a05; --border-card: #00ff4133; --tag-bg: #00ff4111; --shadow-card: 0 0 18px rgba(0, 255, 65, 0.18), 0 0 36px rgba(0, 255, 65, 0.06); --shadow-modal: 0 0 48px rgba(0, 255, 65, 0.35); --font-body: "JetBrains Mono", "Fira Code", "Courier New", ui-monospace, monospace; --font-heading: var(--font-mono); --font-mono: var(--font-mono); --cat-1: #00ff41; --cat-2: #00b328; --cat-3: #88ff88; --cat-4: #ffaa00; --cat-5: #ff0040; --cat-6: #ffe600; color-scheme: dark; } /* ---------------------------------------------------------------- */ /* modern — sleek light theme */ /* Inspired by Linear / Vercel / Tailwind UI. Cool grays, */ /* subtle indigo accents, generous whitespace, no harsh borders. */ /* ---------------------------------------------------------------- */ :root[data-theme="modern"] { --bg: #fafafa; --bg-elevated: #ffffff; --bg-overlay: rgba(250, 250, 250, 0.85); --border: #e5e7eb; --border-strong: #d1d5db; --border-soft: #f3f4f6; --text: #1f2937; --text-bright: #0a0e1a; --text-muted: #6b7280; --text-subtle: #9ca3af; --accent: #4f46e5; /* indigo-600 */ --accent-hover: #4338ca; /* indigo-700 */ --accent-green: #059669; /* emerald-600 */ --accent-orange: #ea580c; /* orange-600 */ --accent-purple: #7c3aed; /* violet-600 */ --accent-pink: #db2777; /* pink-600 */ --accent-yellow: #ca8a04; /* yellow-600 */ --bg-card: #ffffff; --border-card: #e5e7eb; --tag-bg: #f3f4f6; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-heading: var(--font-body); --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --cat-1: #4f46e5; --cat-2: #059669; --cat-3: #7c3aed; --cat-4: #ea580c; --cat-5: #db2777; --cat-6: #ca8a04; color-scheme: light; } /* ---------------------------------------------------------------- */ /* dark-mono — pure monochrome dark, monospace everywhere */ /* Inspired by terminal emulators and minimalist code editors. */ /* No color accents — just shades of gray. */ /* ---------------------------------------------------------------- */ :root[data-theme="dark-mono"] { --bg: #0a0a0a; /* near-pure black */ --bg-elevated: #141414; /* slightly lifted */ --bg-overlay: rgba(10, 10, 10, 0.92); --border: #2a2a2a; --border-strong: #404040; --border-soft: #1f1f1f; --text: #d4d4d4; /* primary mono gray */ --text-bright: #fafafa; /* near-white */ --text-muted: #888888; --text-subtle: #555555; /* In mono mode, accents ARE shades of gray to keep the monochrome feel */ --accent: #fafafa; /* white is the only "accent" */ --accent-hover: #ffffff; --accent-green: #b0b0b0; --accent-orange: #909090; --accent-purple: #c8c8c8; --accent-pink: #d8d8d8; --accent-yellow: #e0e0e0; --bg-card: #141414; --border-card: #262626; --tag-bg: #1f1f1f; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); --font-body: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, ui-monospace, monospace; --font-heading: var(--font-mono); --font-mono: var(--font-mono); --cat-1: #d4d4d4; --cat-2: #b0b0b0; --cat-3: #888888; --cat-4: #c8c8c8; --cat-5: #e0e0e0; --cat-6: #fafafa; color-scheme: dark; } /* ---------------------------------------------------------------- */ /* light — bright daylight theme */ /* Warm neutrals, soft shadows, high readability. Inspired by */ /* Bear / Notion / Apple HIG. */ /* ---------------------------------------------------------------- */ :root[data-theme="light"] { --bg: #fbfaf7; /* warm off-white */ --bg-elevated: #ffffff; --bg-overlay: rgba(255, 255, 255, 0.92); --border: #e8e4dc; /* warm border */ --border-strong: #c8c2b5; --border-soft: #f1ede5; --text: #3d3529; /* warm dark brown */ --text-bright: #1a1611; /* near-black warm */ --text-muted: #7a7263; /* warm gray */ --text-subtle: #a39a89; --accent: #c2410c; /* warm burnt-orange */ --accent-hover: #9a3412; --accent-green: #15803d; /* forest green */ --accent-orange: #ea580c; --accent-purple: #7e22ce; --accent-pink: #be185d; --accent-yellow: #a16207; --bg-card: #ffffff; --border-card: #ebe7df; --tag-bg: #f5f1ea; --shadow-card: 0 1px 3px rgba(60, 50, 40, 0.06), 0 2px 8px rgba(60, 50, 40, 0.04); --shadow-modal: 0 12px 40px rgba(60, 50, 40, 0.18), 0 0 0 1px rgba(60, 50, 40, 0.04); --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --cat-1: #c2410c; --cat-2: #15803d; --cat-3: #7e22ce; --cat-4: #ea580c; --cat-5: #be185d; --cat-6: #a16207; color-scheme: light; } /* ---------------------------------------------------------------- */ /* Global resets + transitions */ /* ---------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; margin: 0; transition: background 0.3s ease, color 0.3s ease; } * { box-sizing: border-box; } h1, h2, h3, h4 { font-family: var(--font-heading); } /* Theme switcher widget. * * Position strategy: * - Desktop (>=720px): floats top-right, doesn't block content. * - Mobile (<720px): pins to BOTTOM of screen, full-width, so it never * overlaps the H1 / cards. `padding-bottom` on body reserves space. */ .theme-picker { position: fixed; z-index: 999; display: inline-flex; gap: 4px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 4px; box-shadow: var(--shadow-card); backdrop-filter: blur(8px); } .theme-picker button { background: transparent; border: 0; padding: 6px 12px; border-radius: 8px; font-family: var(--font-mono); font-size: 0.78em; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; min-width: 56px; } .theme-picker button:hover { color: var(--text-bright); background: var(--tag-bg); } .theme-picker button[aria-pressed="true"] { background: var(--accent); color: var(--bg); font-weight: 600; } /* Desktop: fixed top-right, compact. */ @media (min-width: 720px) { .theme-picker { top: 16px; right: 16px; } body { padding-bottom: 0; } } /* Mobile: sticky bar at the TOP of the page so it never gets hidden behind Android system nav or Brave's bottom tab bar. Sits above the header. */ @media (max-width: 719px) { .theme-picker { position: sticky; top: 0; left: 0; right: 0; width: 100%; margin: 0 0 16px 0; border-radius: 0 0 12px 12px; justify-content: space-between; z-index: 1000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .theme-picker button { padding: 8px 6px; flex: 1 1 0; } body { padding-bottom: 0; } } /* Per-theme polish on the picker */ :root[data-theme="cyber"] .theme-picker { border-color: var(--accent); box-shadow: 0 0 16px rgba(0, 255, 65, 0.5); } :root[data-theme="cyber"] .theme-picker button[aria-pressed="true"] { background: var(--accent); color: #000; box-shadow: 0 0 10px var(--accent); } :root[data-theme="modern"] .theme-picker, :root[data-theme="light"] .theme-picker { border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04); } :root[data-theme="modern"] .theme-picker button[aria-pressed="true"], :root[data-theme="light"] .theme-picker button[aria-pressed="true"] { color: #ffffff; } :root[data-theme="dark-mono"] .theme-picker { border-radius: 0; background: #0a0a0a; } :root[data-theme="dark-mono"] .theme-picker button[aria-pressed="true"] { background: var(--accent); color: #0a0a0a; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }