/* Theme system — each theme overrides a set of CSS variables. The active theme is set via a data-theme attribute on or . Default theme (no attribute) is military_dark. */ :root { /* Default = military_dark */ --hb-page-bg: #f6f7f8; --hb-page-fg: #1f2328; --hb-nav-bg: #1a1d20; --hb-nav-fg: #ffffff; --hb-nav-accent: #ffc107; --hb-nav-accent-fg: #1a1d20; --hb-card-bg: #ffffff; --hb-card-border: #d0d7de; --hb-card-header-bg: #f6f8fa; --hb-link: #0969da; --hb-muted: #57606a; --hb-hero-from: #1a1d20; --hb-hero-to: #2d3338; --hb-hero-fg: #ffffff; --hb-stat: #ffc107; --hb-callout-bg: #fff8e1; --hb-callout-border: #ffc107; --hb-footer-bg: #1a1d20; --hb-footer-fg: #c9d1d9; --hb-verified-bg: #1a7f37; --hb-btn-primary-bg: #ffc107; --hb-btn-primary-fg: #1a1d20; --hb-thread-divider: #eaeef2; } /* Patriotic — navy + red + white */ [data-theme="patriotic"] { --hb-page-bg: #f4f6fa; --hb-page-fg: #0a1832; --hb-nav-bg: #0a1832; --hb-nav-fg: #ffffff; --hb-nav-accent: #c0102e; --hb-nav-accent-fg: #ffffff; --hb-card-bg: #ffffff; --hb-card-border: #c8d0dc; --hb-card-header-bg: #eef2f8; --hb-link: #0a1832; --hb-muted: #4a5568; --hb-hero-from: #0a1832; --hb-hero-to: #1c3461; --hb-hero-fg: #ffffff; --hb-stat: #c0102e; --hb-callout-bg: #fff5f5; --hb-callout-border: #c0102e; --hb-footer-bg: #0a1832; --hb-footer-fg: #c9d4e8; --hb-verified-bg: #166534; --hb-btn-primary-bg: #c0102e; --hb-btn-primary-fg: #ffffff; --hb-thread-divider: #e2e8f0; } /* Subdued — olive drab + tan */ [data-theme="subdued"] { --hb-page-bg: #f0ede4; --hb-page-fg: #2d2d20; --hb-nav-bg: #3b4a26; --hb-nav-fg: #f0ede4; --hb-nav-accent: #c9a96a; --hb-nav-accent-fg: #2d2d20; --hb-card-bg: #fbf9f2; --hb-card-border: #c8c2a8; --hb-card-header-bg: #ede8d4; --hb-link: #5c6e2e; --hb-muted: #6e6a55; --hb-hero-from: #3b4a26; --hb-hero-to: #5c6e2e; --hb-hero-fg: #f0ede4; --hb-stat: #c9a96a; --hb-callout-bg: #f5efd9; --hb-callout-border: #c9a96a; --hb-footer-bg: #3b4a26; --hb-footer-fg: #d6d2bd; --hb-verified-bg: #5c6e2e; --hb-btn-primary-bg: #c9a96a; --hb-btn-primary-fg: #2d2d20; --hb-thread-divider: #d8d3bd; } /* Modern Light — clean professional */ [data-theme="modern_light"] { --hb-page-bg: #ffffff; --hb-page-fg: #0f172a; --hb-nav-bg: #ffffff; --hb-nav-fg: #0f172a; --hb-nav-accent: #2563eb; --hb-nav-accent-fg: #ffffff; --hb-card-bg: #ffffff; --hb-card-border: #e2e8f0; --hb-card-header-bg: #f8fafc; --hb-link: #2563eb; --hb-muted: #64748b; --hb-hero-from: #f8fafc; --hb-hero-to: #e2e8f0; --hb-hero-fg: #0f172a; --hb-stat: #2563eb; --hb-callout-bg: #eff6ff; --hb-callout-border: #2563eb; --hb-footer-bg: #f8fafc; --hb-footer-fg: #475569; --hb-verified-bg: #16a34a; --hb-btn-primary-bg: #2563eb; --hb-btn-primary-fg: #ffffff; --hb-thread-divider: #e2e8f0; } /* High Contrast — accessibility */ [data-theme="high_contrast"] { --hb-page-bg: #ffffff; --hb-page-fg: #000000; --hb-nav-bg: #000000; --hb-nav-fg: #ffffff; --hb-nav-accent: #ffd400; --hb-nav-accent-fg: #000000; --hb-card-bg: #ffffff; --hb-card-border: #000000; --hb-card-header-bg: #f0f0f0; --hb-link: #0000ee; --hb-muted: #333333; --hb-hero-from: #000000; --hb-hero-to: #1a1a1a; --hb-hero-fg: #ffd400; --hb-stat: #000000; --hb-callout-bg: #fffbe6; --hb-callout-border: #000000; --hb-footer-bg: #000000; --hb-footer-fg: #ffffff; --hb-verified-bg: #006400; --hb-btn-primary-bg: #000000; --hb-btn-primary-fg: #ffd400; --hb-thread-divider: #000000; } /* ----- Base styles using the variables ----- */ body { background-color: var(--hb-page-bg); color: var(--hb-page-fg); } .navbar { background-color: var(--hb-nav-bg) !important; border-bottom: 2px solid var(--hb-nav-accent) !important; } .navbar-dark .navbar-brand, .navbar-dark .nav-link, .navbar-dark .navbar-toggler-icon { color: var(--hb-nav-fg) !important; } .navbar-brand .text-warning { color: var(--hb-nav-accent) !important; letter-spacing: 0.05em; } .card { background-color: var(--hb-card-bg); border: 1px solid var(--hb-card-border); box-shadow: 0 1px 2px rgba(0,0,0,.04); color: var(--hb-page-fg); } .card-header { background-color: var(--hb-card-header-bg); border-bottom: 1px solid var(--hb-card-border); font-weight: 600; } .btn-warning { background-color: var(--hb-btn-primary-bg) !important; border-color: var(--hb-btn-primary-bg) !important; color: var(--hb-btn-primary-fg) !important; font-weight: 600; } .btn-warning:hover { filter: brightness(0.9); } .badge-verified { background-color: var(--hb-verified-bg); color: #fff; } .profile-meta, .text-muted { color: var(--hb-muted) !important; } .profile-meta { font-size: 0.9rem; } .thread-row { border-bottom: 1px solid var(--hb-thread-divider); padding: 0.75rem 0; } .thread-row:last-child { border-bottom: none; } .thread-row .title a, a.profile-link { color: var(--hb-link); text-decoration: none; font-weight: 600; } .thread-row .title a:hover, a.profile-link:hover { text-decoration: underline; } .post { border: 1px solid var(--hb-card-border); border-radius: 6px; margin-bottom: 1rem; background: var(--hb-card-bg); } .post-header { background: var(--hb-card-header-bg); border-bottom: 1px solid var(--hb-card-border); padding: 0.5rem 1rem; font-size: 0.9rem; } .post-body { padding: 1rem; } .message-row { padding: 0.75rem 1rem; border-bottom: 1px solid var(--hb-thread-divider); } .message-row.unread { background: var(--hb-callout-bg); font-weight: 600; } .hero { background: linear-gradient(135deg, var(--hb-hero-from) 0%, var(--hb-hero-to) 100%); color: var(--hb-hero-fg); padding: 4rem 1rem; border-radius: 8px; margin-bottom: 2rem; } .hero h1 { font-weight: 700; } .stat { font-size: 2rem; font-weight: 700; color: var(--hb-stat); } .callout { border-left: 4px solid var(--hb-callout-border); padding: 0.75rem 1rem; background: var(--hb-callout-bg); border-radius: 4px; } .text-muted-sm { color: var(--hb-muted); font-size: 0.85rem; } footer.bg-dark { background-color: var(--hb-footer-bg) !important; color: var(--hb-footer-fg) !important; border-top: 2px solid var(--hb-nav-accent) !important; } footer.bg-dark a { color: var(--hb-footer-fg) !important; } footer.bg-dark a.text-warning { color: var(--hb-nav-accent) !important; }